在jquery multiselect中动态添加/删除

时间:2014-02-05 05:02:13

标签: jquery jquery-multiselect

我第一次尝试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>

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

1 个答案:

答案 0 :(得分: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>')
})