multiselect

by Akram kamal

HTML

<script src="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/src/jquery.multiselect.js"></script>
<link rel="stylesheet" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css">
<input type="checkbox" name="chkMain1" value="Main1" id="Main1"><label for="Main1"><b> Main1</br></br></label>
<input type="checkbox" name="chkMain2" value="Main2" id="Main2"><label for="Main2"><b> Main2</br></br></label>
<input type="checkbox" name="chkMain3" value="Main3" id="Main3"><label for="Main3"><b> Main3</br></br></label>

<select id="dropdown1" multiple="multiple" class="multiselect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
</select>

<br>
<label>Scenario: the user checks Main1. If user then checks "1" from the dropdown. A checkbox with "1" next to it would dynamically pop up below Main1 and not the other 2 since Main1 is checked. When this "new" checkbox pops up, it should already be checked.<br>Remember the actual values that is populating the drop down is from the js file and not declared in html like this example.</label>

JavaScript

$(document).ready(function() {
    $(".multiselect").multiselect({
        header: "Choose up to 5 areas total",
        click: function (event, ui) {

            if (ui.checked && $(".multiselect").children(":checked").length >= 5) {
                return false;
            }
            
        },
        selectedList:5
    });
});