1

所以，我正在使用 bootsrap 框架，并且我有一个 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

尝试这个：

$('#InjuryPreventionTopic').change(function () {
    if ($(this).val() == 'falls') {
        $('#drop3').addClass('in');         
    }
    else{
         $('#drop3').removeClass('in');
    }
});
于 2014-09-08T11:17:26.870 回答
0

事实证明我的代码没有任何问题——只有我放的地方！我最初将它放在我在 Visual Studio 中处理的视图上，但在 _Layout 页面上尝试过它并且它有效！

于 2014-09-08T13:47:32.937 回答
0

请您包含 jquery 1.11.0 您可以查看 JsFiddle

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