Question

我有html表单：

<select id="selection" name="type">
    <option value="Interior">Interior</option>
    <option value="Music">Music</option>
</select>
<select id="whichvideo" name="vidtype">
    <option value="">Choose video type</option>
    <option value="Youtube">Youtube</option>
    <option value="Vimeo">Vimeo</option>
    <option id="soundcloud1" value="Soundcloud">Soundcloud</option>
</select>

和jquery：

$("#selection").change(function () {
    if ($(this).find("option:selected").val() === "Music") {
        $("#soundcloud1").show();
    } else {
        $("#soundcloud1").hide();
    }
});

使用此Fiddle

为什么当我选择Music然后返回表单中的Interior时。它是否不隐藏选项Soundcloud

Answer 1

这在firefox 30中对我来说很好。

Working Fiddle

我刚刚在小提琴中添加了jQuery库。如果您正在寻找其他内容，请告诉我。

Answer 2

你的小提琴有几个问题：

你没有包含jQuery所以JS根本就没有工作。
您在选择中有一个选择

以下是更新版本：http://jsfiddle.net/Xg5gU/3/

<select id="selection" name="type">
    <option value=".......">.......</option>
    <option value="Art">Art</option>
    <option value="Architecture">Architecture</option>
    <option value="Bikes">Bikes</option>
    <option value="Fashion">Fashion</option>
    <option value="Films">Films</option>
    <option value="Food">Food</option>
    <option value="Games">Games</option>
    <option value="Interior">Interior</option>
    <option value="Music">Music</option>
    <option value="Photography">Photography</option>
    <option value="Technology">Technology</option>
    <option value="Video">Video</option>
</select>

<select id="whichvideo" name="vidtype">
    <option value="">Choose video type</option>
    <option value="Youtube">Youtube</option>
    <option value="Vimeo">Vimeo</option>
    <option id="soundcloud" value="Soundcloud">Soundcloud</option>
</select>

$("#selection").change(function () {
    if ($(this).find("option:selected").val() === "Music") {
        $("#soundcloud").show();
    } else {
        $("#soundcloud").hide();
    }
});

Answer 3

您不会在不同的浏览器中使用它。您可以在删除之前存储选择的副本。

More info

DEMO：

适用于Firefox，但Chrome不支持此

$("#selection").change(function () {   
    if ($(this).val() === "Music") {
        $("#whichvideo option[value='Soundcloud']").show();
    } else {       
        $("#whichvideo option[value='Soundcloud']").hide();
    }
});

如何使用jquery隐藏表单选项

3 个答案: