创建具有选定值和选项组标签的对象

Question

假设我有这个多选下拉菜单：

<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 是每个选定选项的值。

你有什么想法吗？谢谢

Answer 1

要执行您需要的操作，您可以使用 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>

创建具有选定值和选项组标签的对象

Create an object with selected value and optiongroup label

javascript

jquery

dropdown

optgroup