Question

我有一个小查询。我希望在我的页面中有一个HTML选择结构：

<select id="selectedFormulae">
    <option value="0" disabled="" selected="">select</option>
    <optgroup label="Box1">
        <option value="1">Formula1</option>
        <option value="2">Formula2</option>
    </optgroup>
    <optgroup label="Box2?">
        <option value="1">Formula1</option>
        <option value="2">Formula2</option>
        <option value="3">Formula3</option>
    </optgroup>
    <optgroup label="Marital status?">
        <option value="1">Formula1</option>
    </optgroup>
</select>

将根据用户在其计算中添加的内容添加选项的选项。我的问题是如何在特定选项组下添加特定选项？即。如果用户在box1下添加了另一个值，则应在<optgroup label="Box1">下添加新选项，如下所示：

<optgroup label="Box1">
    <option value="1">Formula1</option>
    <option value="2">Formula2</option>
    <option value="3">Formula3</option>
</optgroup>

如果用户删除了一些值，比如Box1的Formula2那么它只有这个：

<optgroup label="Box1">
    <option value="1">Formula1</option>
    <option value="3">Formula2</option>
</optgroup>

我计划保存JSON对象中的所有选项，然后根据用户添加的内容修改select html。对此有何帮助？

我尝试将它添加到jsonobject中：

var opt = {
    Box1:[
        {name:"Formula1"},
        {name:"Formula2"}
    ],
    Box2:[
        {name:"Formula1"},
        {name:"Formula2"}
    ],
    Box3:[
        {name:"Formula1"},
        {name:"Formula2"}
    ]
};

Answer 1

试试这个：您可以使用jquery属性选择器查找特定的选项组并为其添加新选项

$("#selectedFormulae").find('optgroup[label="Box1"]').append('<option>New option</option>');

此处选项组带有标签=＆＃34; Box1＆＃34;获得选择，用户可以向其添加新选项，类似用户可以使用以下代码删除选项

$("#selectedFormulae").find('optgroup[label="Box1"]').find('option').filter(function(){
    var text = $(this).text();
    return text=='New option'; 
}).remov();

编辑 - 要知道选项是否已存在，请使用以下代码

var $optionGroup = $("#selectedFormulae").find('optgroup[label="Box1"]');
  var optionLength = $optionGroup.find('option').filter(function(){
         return $(this).text() == "New option";
    });
  if(optionLength.length < 1) //option does not exist
   {
     $optionGroup.append('<option>New option</option>');
   }

动态添加选项到特定位置的选项组

1 个答案: