如何使用 jquery 隐藏表单选项答案

【问题标题】：how to hide form option with jquery如何使用 jquery 隐藏表单选项
【发布时间】：2014-06-22 03:07:02
【问题描述】：

我有 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

【问题讨论】：

@MorKadosh 这实际上是有效的
还是不行jsfiddle.net/Xg5gU/6
Hide options in a select list using jQuery的可能重复
在下面的答案之一中必须是跨浏览器的东西，因为这对我来说很好
这太不公平了，我投了反对票。请有人解释我为什么拥有它们！这是一个完全有效的问题！

标签： javascript jquery html

【解决方案1】：

这对我在 Firefox 30 中运行良好。

Working Fiddle

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

【讨论】：

@Maximilian 在 chrome 版本 34.0.1788.0 和 firefox 30 中完全符合您的要求，问题是它在页面加载时不起作用是您想要的吗？
正如我提到的，我说“为什么当我选择音乐然后在表单中返回到内部时。它不隐藏选项 Soundcloud 吗？它似乎不起作用奇数
您正在测试哪个版本的 firefox/chrome？
版本 35.0.1916.153

【解决方案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();
    }
});

【讨论】：

【解决方案3】：

你不会让它在不同的浏览器上工作。您可以在删除之前存储选择的副本。

More info

DEMO:

适用于 Firefox，但 Chrome 不支持此功能

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

【讨论】：