想要实现的效果:
下拉框内容选中后,画面临时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>")