Geek asks and answers

Dynamicaly add / remove in jquery multiselect

I am trying to use jquery multiselect for the first time. I selected my drop-down list as multi-segment.

My dropdown menu looks like this:

<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>

I have above the dropdown, as this is multi-selection

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

It is working fine. Now I want to make this dynamic dynamic. By clicking on one button, the dropdown menu above should look like this:

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

I want to say that the remaining option should disappear. It should show the original dropdown menu again when I click another button. Here I want only the logic of the multi selector. Please help me.

+3
source share
1 answer

I am considering your explanation,

Try it,

Demo Example

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>')
})
+1
source

More articles:


All Articles