Search code examples
jqueryshow-hidemulti-select

This Show/Hide function isn't working with MultiSelect elements

This Show/Hide function works correctly with Select elements, but it stops working when I change them to MultiSelect elements (multiple="multiple") and/or add square brackets to the element's name (necessary for submitting the MultiSelect form elements to a db). How can I change it so that it will work with MultiSelect elements?

A working example is available here: http://jsfiddle.net/chayacooper/yaq5F/8/

JS

$(document).ready(function () {
    $("#row1, #row2").hide();
    if ($("[name=item1]").val() === "Null" || $("[name=item1]").val() === "") {
        $("#row1").show();
    } else {
        $("#row2").show()
    };
});

HTML

<div id=row1 style="font-weight:bold">Row 1 - Nothing selected</div>
<div id=row2 style="font-weight:bold; display:none;">Row 2 - Something selected</div>

<select name=item1 class="field">
<option value="Null">Select</option>
<option value=1>Option 1</option>
<option value=2>Option 2</option>
<option value=3>Option 3</option>
</select>
Solution

  • When using the multiple option, the returned value is an array, not a string since you can select multiple values by holding down the control key.

    You might want to check the value with something like $.inArray("Null", $(".field").val())

    For future reference, it really helps to just look and see what the value coming back is. A simple console.log($(".field").val()) is all I did to see what was going on.