js 下拉框增加和移除选项

最新推荐文章于 2021-11-07 13:54:20 发布

原创最新推荐文章于 2021-11-07 13:54:20 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何实现在下拉框选择后动态更新表格数据，以及当表格行被删除时，将删除项回加到下拉框。针对具有分组的下拉框，还展示了使用select2插件时如何进行操作。通过JavaScript实现增删功能，确保了UI与数据的同步。

想要实现的效果：
下拉框内容选中后，画面临时table添加对应数据；
table行数据删除后，下拉框增加删除的选项

HTML内容

<select  id="test" ></select>

JS内容

//移除
$("#test option:selected").remove();
//增加
$('#test').append("<option value=" + value + ">" + text + "</option>");

进阶版，当下拉框中存在分组情况：
HTML内容

<select id="selectGroup">
    <option data-select2-id="2"></option>
    <optgroup label="分组1" id="group1">
        <option value="1">test1</option>
        <option value="2">test2</option>
    </optgroup>
    <optgroup label="分组2" id="group2">
        <option value="3">test3</option>
        <option value="4">test4</option>
    </optgroup>
</select>

JS内容 注：此时ID为分组ID，并非下拉框ID
若分组下拉框使用的是select2插件，增加内容后需要重新初始化下拉框

//移除内容
$("#group1 option:selected").remove();
//增加单条option内容
$('#group1').append("<option value=" + value + ">" + text + "</option>");
//增加整个分组
$("#selectGroup").append("<optgroup label='分组3' id='group3'><option value=" + value  + ">" + text  + "</option></optgroup>")