1

我试图让一个选择元素显示何时单击另一个选择元素中的选项或不等于默认值。我尝试在这里查看其他一些帖子，但我无法获得与我的代码一起使用的解决方案。

$(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>
4

1 回答 1

3

可能您需要使用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
});
于 2012-06-16T20:23:50.487 回答