jquery - 在jquery多选中动态添加/删除

Question

我第一次尝试jquery multiselect。我已将下拉列表设置为多选。

我的下拉菜单是这样的，

<select id="selectChartType" multiple="multiple"  style="width:20px">
    <option value="chart1">chart1</option>
    <option value="chart2">chart2</option>
    <option value="chart3">chart3</option>
    <option value="chart4">chart4</option>
    <option value="chart5">chart5</option>
    <option value="chart6">chart6 </option>
</select>

我将上面的下拉菜单设置为像这样的多选

$("#selectChartType").multiselect();

工作正常。现在我想让这个下拉菜单变得动态。通过单击一个按钮，上面相同的下拉列表应该像这样改变，

<select id="selectChartType" multiple="multiple" style="width:20px">
<option value="chart3">chart3</option>
<option value="chart4">chart4</option>
</select>

我的意思是剩余的选项应该消失。当我单击另一个按钮时，它应该再次显示原始下拉列表。我只想要这里的多选逻辑。请帮我。

Answer 1

我考虑你的解释，

试试这个，

示例 Demo

HTML

<select id="selectChartType" multiple="multiple"  style="width:100px">
    <option value="chart1">chart1</option>
    <option value="chart2">chart2</option>
    <option value="chart3">chart3</option>
    <option value="chart4">chart4</option>
    <option value="chart5">chart5</option>
    <option value="chart6">chart6 </option>
</select>
<button class="button1" >change list</button>
<button class="button2" >change prev list</button>

Jquery:

$('.button1').click(function(){
$("#selectChartType").html('<option value="chart3">chart3</option><option value="chart4">chart4</option>')
})

$('.button2').click(function(){
$("#selectChartType").html('<option value="chart1">chart1</option><option value="chart2">chart2</option><option value="chart3">chart3</option><option value="chart4">chart4</option><option value="chart5">chart5</option><option value="chart6">chart6 </option>')
})