別の選択要素のオプションがクリックされたとき、またはデフォルト値と等しくないときに表示する選択要素を取得しようとしています。ここで他のいくつかの投稿を見てみましたが、私のコードで解決策を見つけることができませんでした。
$(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>