Dynamicaly add/remove in jquery multiselect

Question

I am trying jquery multiselect first time. I have made my dropdown list as multiselect.

My dropdown is 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 dropdown as multiselect like this

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

It is working fine. Now i want to make this dropdown dynamic. By clicking one button the same above dropdown should change like this,

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

I mean remaining option should disappear. It should again show original dropdown when i click one more button. I want only the multiselect logic here. Please help me.

Answer 1

I consider your explanation,

Try this,

Example 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>')
})