1

したがって、私はブートストラップ フレームワークを使用しています。ドロップダウン リストから特定の値が選択されているかどうかに応じて、表示および非表示にする div があります。これが私のコードです：

<label>Injury Prevention Topic</label>

<select id="InjuryPreventionTopic" class="selectpicker show-tick">
    <option value="Animal Bites">Animal Bites</option>
    <option value="Assault">Assault</option>
    <option value="Burns and Scalds">Burns and Scalds</option>
    <option value="Drowning">Drowning</option>
    <option value="falls">Falls</option>
    <option value="Firearms">Firearms</option>
    <option value="Hanging">Hanging</option>
    <option value="Homicide">Homicide</option>
    <option value="Mutilation">Mutilation</option>
    <option value="Not Further Specified">Not Further Specified</option>
    <option value="Poisoning">Poisoning</option>
    <option value="Self-Harm">Self-Harm</option>
    <option value="Sport and Leisure">Sport and Leisure</option>
    <option value="Suicide">Suicide</option>
    <option value="roadaccident">Road Traffic Accidents</option>
</select>

<div id="drop3" class="collapse">
    <label>Falls Sub Category</label>
    <select id="FallsSubCategory" class="selectpicker show-tick">
        <option>Case or Risk Identification</option>
        <option>Exercise, Strength and Balance Training</option>
        <option>Falls Risk Assessment</option>
        <option>General</option>
        <option>Hip Protectors</option>
        <option>Multifactorial Interventions</option>
        <option>Prevention Programmes</option>
        <option>Vitamin D</option>
    </select>
</div>

<script>
    $('#InjuryPreventionTopic').change(function () {
        if ($(this).val() == 'falls') {
            $('#drop3').toggleClass('in');
        }
    });
</script>

いくつかのバリエーションを試しましたが、何もうまくいかないようです。何か案は？

4

4 に答える 4

1

トグルをオフにする代わりに、クラスを追加/削除する必要があると思います。値が要素でない場合、fallsクラス#drop3が続行されるためinです。

$('#InjuryPreventionTopic').change(function () {
    if ($(this).val() == "falls") {
        $('#drop3').addClass("in");         
    } else{
        $('#drop3').removeClass("in");
    }
});
于 2014-09-08T11:19:48.097 に答える
0

jquery 1.11.0 が含まれていることを確認してください。JsFiddle を確認できます。

Here's [JsFiddle](http://jsfiddle.net/fL3ouc0f/) !
于 2014-09-08T11:29:47.227 に答える
0

私のコードには何も問題がなかったことがわかりました - 私がそれを置いた場所だけです! 元々は Visual Studio で作業していたビューに配置していましたが、_Layout ページで試してみたところ、うまくいきました!

于 2014-09-08T13:47:32.937 に答える