0

not()クラスが最初の選択リストで選択されたオプションのクラスと同じでない場合、jQuery メソッドを使用して 2 番目の選択リストのオプション要素を非表示にしています。

これは、FFでは機能しますが、ChromeやSafariでは機能しないjQueryコードです（IEはまだチェックしていません）。私はこれに少し慣れていないので、おそらく簡単な修正またはより簡単な方法で達成できます。ありがとう。

$('#formcategory').on('change', function() {
    var selected = $('#formcategory :selected').attr("class");
    $('#formsubcategory').find('option').not("."+selected).hide();
});

<select id="formcategory" name="Category">
    <option value="Select One">Select One</option>
    <option class="BloodSample" value="1">Blood Sample</option>
    <option class="Exercise" value="2">Exercise</option>
    <option class="InsulinInjection" value="3">Insulin Injection</option>
    <option class="Meal" value="4">Meal</option>
    <option class="Symptoms" value="5">Symptoms</option>
    <option class="UrineSample" value="6">Urine Sample</option>
</select>

<label id="lblsubcategory" for="formsubcategory" style="display: inline;">Subcategory</label>
<select id="formsubcategory" name="Subcategory" style="display: block;">
    <option selected="selected" value="Select One" style="display: none;">Select One</option>
    <option class="Symptoms" value="51">Lethargy</option>
    <option class="Symptoms" value="52">Vomiting</option>
    <option class="Symptoms" value="53">Diarrhea</option>
    <option class="Symptoms" value="54">Seizures</option>
    <option class="Symptoms" value="55">Missed Meal</option>
    <option class="Symptoms" value="56">Poor Appetite</option>
    <option class="Symptoms" value="57">Excessive Drinking</option>
    <option class="Symptoms" value="58">Excessive Urination</option>
    <option class="UrineSample" value="61" style="display: none;">Positive - Glucose</option>
    <option class="UrineSample" value="62" style="display: none;">Negative - Glucose</option>
    <option class="UrineSample" value="63" style="display: none;">Positive - Ketones</option>
    <option class="UrineSample" value="64" style="display: none;">Negative -Ketones</option>
</select>
4

1 に答える 1

2

要素を表示することはなく、非表示にするだけです:

$('#formcategory').on('change', function() {
    var selected = $('#formcategory :selected').prop("class");
    if (selected.length) $('#formsubcategory option').show().not('.'+selected).hide();
});

フィドル

編集:
最初のオプションを再選択するときのエラーを回避するために、空の className のチェックを追加しました!

于 2013-11-01T13:41:25.273 に答える