创建具有选定值和选项组标签的对象
Create an object with selected value and optiongroup label
假设我有这个多选下拉菜单:
<select id='grp_option'>
<optgroup label="Group 1">
<option value='Option 1.1'>Option 1.1</option>
</optgroup>
<optgroup label="Group 2">
<option value='Option 2.1'>Option 2.1</option>
<option value='Option 2.2'>Option 2.2</option>
</optgroup>
</select>
我想创建一个这样的对象数组:
let array = [];
let obj, obj2;
obj[label] = value;
obj2[label2] = value2;
array.push(obj);
array.push(obj2);
其中 label 是每个选定选项的 optgroup 标签,value 是每个选定选项的值。
你有什么想法吗?
谢谢
要执行您需要的操作,您可以使用 map()
方法。请注意,您可以提供括号中的变量作为 属性.
的名称
另请注意,我将 multiple
属性添加到 select
以允许选择多个 option
- 如果没有这个,构建值数组就没有意义.
let $select = $('#grp_option').on('change', () => {
let arr = $select.find(':selected').map((i, el) => ({
[$(el).closest('optgroup').prop('label')]: $(el).text()
})).get();
console.log(arr);
});
select {
width: 150px;
height: 175px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="grp_option" multiple>
<optgroup label="Group 1">
<option value="Option 1.1">Option 1.1</option>
</optgroup>
<optgroup label="Group 2">
<option value="Option 2.1">Option 2.1</option>
<option value="Option 2.2">Option 2.2</option>
</optgroup>
<optgroup label="Group 3">
<option value="Option 3.1">Option 3.1</option>
<option value="Option 3.2">Option 3.2</option>
<option value="Option 3.2">Option 3.3</option>
</optgroup>
</select>
假设我有这个多选下拉菜单:
<select id='grp_option'>
<optgroup label="Group 1">
<option value='Option 1.1'>Option 1.1</option>
</optgroup>
<optgroup label="Group 2">
<option value='Option 2.1'>Option 2.1</option>
<option value='Option 2.2'>Option 2.2</option>
</optgroup>
</select>
我想创建一个这样的对象数组:
let array = [];
let obj, obj2;
obj[label] = value;
obj2[label2] = value2;
array.push(obj);
array.push(obj2);
其中 label 是每个选定选项的 optgroup 标签,value 是每个选定选项的值。
你有什么想法吗? 谢谢
要执行您需要的操作,您可以使用 map()
方法。请注意,您可以提供括号中的变量作为 属性.
另请注意,我将 multiple
属性添加到 select
以允许选择多个 option
- 如果没有这个,构建值数组就没有意义.
let $select = $('#grp_option').on('change', () => {
let arr = $select.find(':selected').map((i, el) => ({
[$(el).closest('optgroup').prop('label')]: $(el).text()
})).get();
console.log(arr);
});
select {
width: 150px;
height: 175px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="grp_option" multiple>
<optgroup label="Group 1">
<option value="Option 1.1">Option 1.1</option>
</optgroup>
<optgroup label="Group 2">
<option value="Option 2.1">Option 2.1</option>
<option value="Option 2.2">Option 2.2</option>
</optgroup>
<optgroup label="Group 3">
<option value="Option 3.1">Option 3.1</option>
<option value="Option 3.2">Option 3.2</option>
<option value="Option 3.2">Option 3.3</option>
</optgroup>
</select>