[RESOLVED]Hide jQuery multiselect based on checkbox selection

CheckBox, HTML, Jquery, Web Forms, Xml, , , ,

//html

<input type="checkbox" value=
"checkbox1" name="checkbox1">

<select id="dropdown" name="dropdown"
multiple="multiple">
<option id="item"></option>
</select>

//jQuery

$("#checkbox").change(function(){

$('#dropdown').multipleSelect();

Hi,

In your CHANGE function : 
Get the checkBox Checked value , then check with the Options available in dropdown. If values/text is matching then append an attribute ( selected="selected" ) to the one.

So that it may appear as below. selected and not selected 

<select id="dropdown" name="dropdown[]" multiple="multiple">
<option selected="selected">1</option>
<option>2</option>

Let us know, whthr it works out for you

- Rigin

Hi SlyF0x,

For your issue, please try the code below:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#checkboxid').change(function () {

                if ($(this).is(':checked')) {
                    $('#listbox').attr('multiple', 'multiple');
                }
                else {
                    $('#listbox').removeAttr('multiple');
                }
            })
        })
    </script>
</head>
<body>
    <div>
        <input type="checkbox" id="checkboxid" /> Multiple<br />
        <select id="listbox">
            <option value="1">Option 1
            <option value="2">Option 2
            <option value="3">Option 3
        </select>
    </div>
</body>
</html>

Best Regards,

Kevin Shen.

Hi I have a problem now, how do I show/ hide a jquery multiselect dropdown based on multiselect dropdown option?

Hi SlyF0x,

You can add change event for your multiselect dropdown:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery.js"></script>
    <script src="../Scripts/jquery-ui-1.8.20.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#checkboxid').change(function () {
            //you can decide which one you item you choose ,then hide the multilselect dropdown
                    $('#listbox').removeAttr('multiple');
               

            })
        })
    </script>
</head>
<body>
    <div>
     
        <select id="checkboxid">
            <option value="1">Option 1
            <option value="2">Option 2
            <option value="3">Option 3
        </select>
        <select id="listbox" multiple="multiple">
            <option value="1">Option 1
            <option value="2">Option 2
            <option value="3">Option 3
        </select>

    </div>
</body>
</html>

Best Regards,
Kevin Shen.

Leave a Reply