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

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>

选择的选项将根据用户在计算中添加的内容进行添加。我的问题是如何在特定选项组下添加特定选项？ IE。如果用户在 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 对象中，然后根据用户添加的内容修改选择 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>');

此处带有 label="Box1" 的选项组被选中，用户可以向其附加新选项，类似地，用户可以使用以下代码删除选项

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

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

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>');
}