Question

我有一个下拉事件如下：

<select name="event" class="filterSelectBox" onchange="javascript: test();">
                      <option value="disable" id="default" selected="selected">Event Type</option>
            <option value="Wedding">Wedding</option>
            <option value="Sangeet">Sangeet</option>
            <option value="Mehendi">Mehendi</option>
            <option value="Youngsters">Youngsters</option>
            <option value="BridalShower">Bridal Shower</option>
            <option value="BabyShower">Baby Shower</option>
            <option value="Birthday">Birthday</option>
            <option value="Meeting">Meeting</option>
            <option value="Conference">Conference</option>
            <option value="Other">Other</option>
          </select>

现在的问题是，当有人点击下拉菜单时，默认选项会在下拉列表中再次显示事件类型。所以我尝试过这样的事情：

 <script>
function test()
{
    $(" option[id='events']").hide();
}


</script>

该默认选项仍然无法隐藏。

请提供建议。

Answer 1

使用id=default而不是id=events，

function test()
{
    $(" option[id='default']").hide();
}

或使用javascript至hide此option赞，

function test()
{
    document.getElementById('default').style.display="none";
}

Answer 2

当你使用Jquery时，我会这样做：

$(".filterSelectBox").change(function () 
{
    $(" option[id='default']").hide();
});

工作小提琴： http://jsfiddle.net/SGSP3/

更新评论：

如果您想点击它，请执行

$(".filterSelectBox").click(function ()
{
   $(" option[id='default']").hide();
});

小提琴：http://jsfiddle.net/SGSP3/1/

Answer 3

只需将HTML中的Eventtype从onchange更改为onclick。

Answer 4

<select name="event" class="filterSelectBox" onchange="test(this);">
                      <option value="disable" id="default" selected="selected">Event Type</option>
            <option value="Wedding">Wedding</option>
            <option value="Sangeet">Sangeet</option>
            <option value="Mehendi">Mehendi</option>
            <option value="Youngsters">Youngsters</option>
            <option value="BridalShower">Bridal Shower</option>
            <option value="BabyShower">Baby Shower</option>
            <option value="Birthday">Birthday</option>
            <option value="Meeting">Meeting</option>
            <option value="Conference">Conference</option>
            <option value="Other">Other</option>
          </select>

我已经将onChange函数更改为test（this）以供参考。然后对test（）做了一些修改。

<script>
function test(select){
 $("option[value='disable']",select).hide();
}
</script>

我希望这会为你锻炼。

jquery隐藏了下拉变换中的一个选项

4 个答案: