How to handle onclick even in bootstrap multiselect?

Question

I have a drop down for which i have added bootstrap multiselect.

            <select id="selectoption" multiple="multiple">
              <option value="opt1">All</option>
              <option value="opt2">all_content1</option>
              <option value="opt2">all_content1</option>
              <option value="opt3">all_content1</option>
              <option value="opt4">all_content1</option>
              <option value="opt5">all_content1</option>
              <option value="opt6">all_content1</option>
              <option value="opt7">all_content1</option>
              <option value="opt8">all_content1</option>
              <option value="opt9">separate_content1</option>
              <option value="opt10">separate_content2</option>
            </select>

I have added multiselect like this,

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

In bootstrap multiselect they have their own select all option which i don't want to use it here. I want "select-all" logic which toggles the selection up to "opt8". Please help.

Answer 1

You can have select all logic that is if you want to select all you can have like :

  $('#selectoption option').attr('selected', true);

But as you requested your code will be as click ALL:

$('option').click(function(){  
    if($(this).val()=="opt1")      
        $("#selectoption").val(["opt2","opt3","opt4","opt5","opt6","opt7","opt8","opt9"]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select id="selectoption" multiple="multiple">
              <option value="opt1">All</option>
              <option value="opt2">all_content1</option>
              <option value="opt3">all_content1</option>
              <option value="opt4">all_content1</option>
              <option value="opt5">all_content1</option>
              <option value="opt6">all_content1</option>
              <option value="opt7">all_content1</option>
              <option value="opt8">all_content1</option>
              <option value="opt9">all_content1</option>
              <option value="opt10">separate_content1</option>
              <option value="opt10">separate_content2</option>
            </select>