jquery - 单击选项即可显示元素

Question

我试图获得一个选择元素，以显示何时单击另一个选择元素中的选项或不等于默认值。我尝试在这里查看其他几篇文章，但找不到与我的代码一起使用的解决方案。

$(document).ready(function() {
    $("div.caseType ul").hide();
    $("#stateSelect").click(function() {
        var currentState = $("#stateSelect option:selected").val();

        if(currentState != "State") {
            $("ul#" + currentState).show();
        }
    });
});

<div id="select">
    <select name="state" id="stateSelect">
            <option value="State">State</option>
            <option value="Arizona">Arizona</option>
            <option value="California">California</option>
            <option value="Connecticut">Connecticut</option>
            <option value="Florida">Florida</option>
            <option value="Illinois">Illinois</option>
            <option value="Michigan">Michigan</option>
            <option value="Minnesota">Minnesota</option>
            <option value="Nevada">Nevada</option>
            <option value="New Hampshire">New Hampshire</option>
            <option value="New Jersey">New Jersey</option>
            <option value="New York">New York</option>
            <option value="Ohio">Ohio</option>
            <option value="Pennsylvania">Pennsylvania</option>
            <option value="Rhode Island">Rhode Island</option>
            <option value="Texas">Texas</option>
            <option value="Utah">Utah</option>
            <option value="Washington">Washington</option>
    </select>
</div>
<br style="clear:both;"/>
<div id="label">
        <label>Case type:</label>
    </div>
<div id="select" class="caseType">

    <ul id="Arizona">

    <li style="list-style-type:none;">
            <select name="conviction">
                <option>Select One</option>
                <option value="arrestedWithoutConviction">Arrested without Conviction</option>
                <option value="adultConviction">Adult Conviction</option>
                <option value="diversionDeferred">Diversion Program / Deferred Case</option>
                <option value="juvenile">Juvenile Conviction</option>
            </select>
    </li>
    </ul>
    <ul id="Ohio">
    <li style="list-style-type:none;">
    <select name="conviction">
    <option>Select One</option>
    <option value="adultConviction">Adult Conviction</option>
    <option value="adultDismissedCase">Adult Dismissed Case</option>
</select>
    </li>
    </ul>

Answer 1

可能您需要使用change事件而不是click：

$(document).ready(function() {    
    $("#stateSelect").change(function() {
        $("div.caseType ul").hide();

        var currentState = $(this).val();         
        if(currentState != "State") {
            $("ul#" + currentState).show();
        }
    }).trigger('change');   //For hiding all 'ul's on initial load
});