如何选择<option>标签与jQuery的功能使用

-2

我想要使用选择/选项下拉列表，以便当您选择其中一个选项其他元素显示或隐藏在页面的其他地方。我设法做到这一点与单选按钮使用ID或类选择器和jQuery的隐藏/显示功能，但不能使用选择/选项下拉列表中做到这一点。如何选择<option>标签与jQuery的功能使用

代码如下所示：

HTML ...

<select name="attending"> 
    <option id="yes" value="Yes">Yes</option> 
    <option id="yes_partner" value="Yes_Partner">Yes + Partner</option> 
    <option id="yes_partner_kids" value="Yes_Partner_Kids">Yes + Partner & Kid(s)!!!</option> 
    <option id="no" value="No">No</option> 
</select>

jQuery脚本...

$(function(){ 
    $("#yes").click(function(){ 
     $(".yes").show(); 
     $(".send").show(); 
     $(".yes_partner").hide(); 
     $(".yes_partner_kids").hide(); 
     $(".main_guest").show(); 
    }); 
});

试图与class和id和使用jQuery选择，而不是也试过点击但没有运气。适用于单选按钮，但不适用于<option>。

来源

2016-01-11 PaulWallis42

的可能的复制[jQuery的获取所选选项从下拉菜单（http://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown ） –

我想你会使用'.change（）'来查找你要查找的内容并且使用所选选项的值 – ntgCleaner

您需要将change事件附加到select并检查它的值以决定要显示/隐藏哪些项目。

$(function(){ 
    $("select[name=attending]").change(function(){  
     if($(this).val() == "yes") 
     { 
     $(".yes").show(); 
     $(".send").show(); 
     $(".yes_partner").hide(); 
     $(".yes_partner_kids").hide(); 
     $(".main_guest").show(); 
     } 
    }); 
});

这种方法的问题是，你会需要很多的if-else，这使得代码错综复杂，很难管理。

在我看来，最好的办法是将你想隐藏的元素定义为每个选项元素的属性。

<option id="yes" value="yes" data-show="yes,send,main_guest" data-hide="yes_partner,yes_partner_kids">Yes</option> 

$(function(){ 
    $("select[name=attending]").change(function(){  
     var itemsToShow = $("#" + $(this).val()).attr("data-show").split(','); 
     alert(itemsToShow.length); 
     var itemsToHide = $("#" + $(this).val()).attr("data-hide").split(','); 
     $.each(itemsToShow,function() 
     { 
     $('.' + this).show(); 
     });  
     $.each(itemsToHide,function() 
     { 
     $('.' + this).hide(); 
     });  
    }); 
});

下面是一个例子：http://jsfiddle.net/DinoMyte/p8ARq/616/

来源

2016-01-11 22:43:24 DinoMyte

谢谢，这很好地运用了你的顶级解决方案和另外两层if语句。 – PaulWallis42

如何选择<option>标签与jQuery的功能使用

回答

相关问题