当我选择一个单选按钮时，Jquery函数会过滤值[重复]答案

【问题标题】：Jquery function when I choose a radio button it filters values [duplicate]当我选择一个单选按钮时，Jquery函数会过滤值[重复]
【发布时间】：2011-06-16 18:55:11
【问题描述】：

可能重复：
jQuery disable SELECT options based on Radio selected (Need support for all browsers)

我有两个单选按钮

<html>
<input type="radio" class="status" name="status" checked="checked"   value="New" />New
<input type="radio" class="status" name="status"  value="Used" />Used

<select id="Insurance_type">
    <option>Home Used Insurance1</option>
    <option>Home New Insurance1</option>
 <option>Home Used Insurance2</option>
    <option>Home New Insurance2</option>

</select>
</html>

当我选择新建单选按钮时，我需要一个 Jquery 脚本，它将过滤下拉列表。我将只有新的保险类型。

【问题讨论】：

您要过滤下拉列表或选项吗？
我需要过滤下拉列表中的值：例如，如果我选中 New，我应该有 Home New Insurance1 和 Home New Insurance 2

标签： javascript jquery

【解决方案1】：

您可以使用:contains() 选择器来执行此操作：

$('input[name="status"]').change(function(){
    $('#Insurance_type option').show();
    $('#Insurance_type option:contains("'+$(this).val()+'")').hide();
});

示例：http://jsfiddle.net/mknvv/21/

~~找出为什么 .siblings().show() 在那里不起作用...~~

编辑使用sibling();

var a = '#Insurance_type option:contains("'+$(this).val()+'")';
$(a).show().siblings().not(a).hide();

例如：http://jsfiddle.net/mknvv/55/

【讨论】：

【解决方案2】：

为新按钮添加 id 到这个单选按钮-

<input type="radio" class="status" name="status" checked="checked" id="new"  value="New" />New    


$('#new).click(function(){   
     $('#Insurance_type option').each(function(i, option){
        if($(option).text().indexOf('new Insurance') < 0){
             $(option).remove();
        }

   })

});

为其他单选按钮执行此操作。
未经测试，但我认为这应该工作。

【讨论】：

【解决方案3】：

试试这个 JavaScript，将 id 替换为您在页面上使用的那些：

$("#homeUsedInsurance1").bind("focus blur click",function(){
    $("#dropDownList").html("<option value=one>option one</option><option value=two>option two</option>");
});

然后重复所有其他单选按钮。

广告@m

【讨论】：

【解决方案4】：

$('.status').change(function() {
    var v = $('.status:checked').val(); // get chosen value
    $('#Insurance_type option').hide(); // first hide all
    $('#Insurance_type option:contains("' + v + '")').show(); // Show only those that contain value
    $('#Insurance_type option:visible:first').attr('selected', true); // myst select a non-hidden value!
});

Working example

【讨论】：

【解决方案5】：

这是一个重复的问题，请在此处查看带有功能的答案jQuery disable SELECT options based on Radio selected (Need support for all browsers)

【讨论】：

【解决方案6】：

最好的办法是有一个额外的选择元素：

<input type="radio" class="status" name="status" checked="checked"   value="New" />New
<input type="radio" class="status" name="status"  value="Used" />Used

<select id="used" style="display: none">
    <option>Home Used Insurance1</option>
    <option>Home Used Insurance2</option>
</select>

<select id="new">
    <option>Home New Insurance1</option>
    <option>Home New Insurance2</option>
</select>

然后您可以在选中单选框时显示/隐藏每一个：

$(".status").change(function(){

    var $new = $("#new"),
        $used = $("#used");

    if( $(this).val() == "New" ){
        $new.show();
        $used.hide();
    } else {
        $new.hide();
        $used.show();        
    }

});

在这里演示：http://jsfiddle.net/BEC38/

【讨论】：