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.

Is there any chance you could elaborate on the desired behaviour a little more? For example, when you say 'by clicking one button', is this button somewhere else but on the same page, or do you mean 'clicking one of the select options'? — Horatio Alderaan, Feb 05 '14 at 05:14
Like i have one more dropdown and i have 2 options there, saying type1 and type2. when i select type two the dropdown should change like above — user3136030, Feb 05 '14 at 05:20

score 1 · Accepted Answer · answered Feb 05 '14 at 06:08

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

Dynamicaly add/remove in jquery multiselect

1 Answers1