javascript - String cutting, no idea...

Question

As shown in the figure:
This is a table with select in it. Now we have obtained a string about the values ​​​​of all drop-down menus.
I want to cut them into separate data and store them in an array. I have no idea at the moment. Please give me some ideas = =

**

first question:

**
The string obtained is: "Year-end final settlement 2005 approved collection and prepayment - monthly 2016 please select audit collection and prepayment - quarterly 2008 fourth quarter approved collection".
In other words, all the values ​​selected by select are connected together, and I have no idea of ​​​​cutting them apart.
Finally I want to make it

[{type:"年终汇算",time1:"2005年",time2:"",fangs:"核定征收"},{type:"预缴-月度",time1:"2016年",time2:"2月",fangs:"查账征收"},{type:"预缴-季度",time1:"2008年",time2:"第四季度",fangs:"查账征收"}]

This is what I want to save in the end.

**

second question:

**

Among these options, if the user does not choose, "Please select" will be displayed. How can we judge whether "Please select" appears in these values? (In other words, you cannot submit without selecting it. You must select every option before you can submit the storage data).

PS: 1. My annual and monthly quarter options are different. The top one is the second level linkage, and the bottom monthly quarter is the third level linkage
2. My selection is written in the trtd of the table, and These are dynamically generated with an "Add" button.

I'm sorry I forgot to mention these two points just now, I'll add a few more -.-

Answer 1

1. It is strongly not recommended to use segmentation. You should find a way to optimize the "get selected" items so that these fields are naturally structured.

If you use the segmentation method, the maintenance cost will be very high in the future.

If you insist on using the regular method, you should first use "-" to cut the string.
For each string, match "year-end calculation", "monthly", "quarterly", etc., get the type, then continue to match the time, and then match fangs

2. In the form submission code, obtain the value of each option in turn and judge the legality. In fact, this is also a common approach.

Answer 2

Drop-down selection and value ideas

The following are my thoughts

• Each row instance has a value object, like: this.value = {};

• The select in the line uses standard numeric values ​​to compare the array subscripts to ensure the accuracy of the value;

• Every change event of select will modify a corresponding value, such as: when the first select.type is selected, add this.value.type = $type[0] before the linkage code. value —— Substitute the corresponding variable by yourself;

• Use hidden fields to manage output, such as: <input type="hidden" name="name[]" />;

You can use any data format. I personally recommend using numbers as much as possible, such as:

// 数组
this.value = [1,1,1,0]; // 预缴-月度|2016年|1月|查账征收

// 对象
this.value = {
    type: 2, // 预缴-季度
    years: 1, // 2016年
    time: 3, // 第四季度
    fangs:1 // 核定征收
};

The last select.fangs will generate available data for use by the form when selecting, such as:

$fangs.on('change.app', $.proxy(function(e){
    // 添加值
    this.value.fangs = $fangs[0].value;
    
    // 生成表单值
    this.$output.val(JSON.stringify(this.value));
}, this));

About verification

Extend a validation method, such as: AppRow.prototype.validate(). This method monitors the legality of the form based on the content of this.value and returns a Boolean value, such as:

• Is it an empty object first? If so, it means that the first select in this row is Please select and return false;

• If .type - 0 - Annual Calculation(the first select) is selected, get the AppRow.typeChose[this.value.type] object;

• The object does not exist, indicating that it may be out of bounds. If it does not exist at all, AppRow.typeChose[4], returns false；

• According to the selected AppRow.typeChose[this.value.type].types, it is obtained that typeSubLen is the number of subsequent forms corresponding to the current type, that is, the current type should have several related children;

• If (this.value.length - 1) < typeSubLen indicates insufficient length, missing parameters, or !this.value.time1 does not exist, return false；

• this.value.time1 exists, value === -1 or !AppRow.typeChose[0].types[this.value.time1], returns false；

• this.value.time2 exists, the value === -1 or !AppRow.typeChose[0].types[0].zType_time1[this.value.time1], returns false;

• !this.value.fangs or this.value.fangs === -1, returns false;

• If all conditions are met, return true;