如何用jquery隐藏表单选项

how to hide form option with jquery

本文关键字：表单 选项 隐藏 jquery 何用      更新时间：2023-09-26

我有一个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();
    }
});

with this Fiddle

为什么当我选择Music，然后返回Interior的形式。它不隐藏选项Soundcloud

这在firefox 30中运行良好。

Working Fiddle

我刚刚添加了jQuery库在小提琴。

你的小提琴有几个问题:

  1. 你没有包含jQuery，所以JS根本无法工作。
  2. 在选择
    3. 中有一个选择

更新后的版本: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();
    }
});

您将无法在不同的浏览器中工作。您可以在删除之前存储选择的副本。

更多信息

演示:

可以在Firefox中使用，但是Chrome不支持

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