Jquery函数当我选择一个单选按钮时它会过滤值

时间:2011-06-16 09:03:35

标签: javascript jquery

  

可能重复:
  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>

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

6 个答案:

答案 0 :(得分:2)

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

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

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

off以确定.siblings().show()无法在那里工作的原因......

修改 使用sibling();

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

示例:http://jsfiddle.net/mknvv/55/

答案 1 :(得分:0)

尝试使用此JavaScript,将ID替换为您在页面上使用的ID:

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

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

广告@米

答案 2 :(得分:0)

为新按钮添加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 :(得分:0)

$('.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

答案 4 :(得分:0)

这是一个重复的问题,请参阅此处的函数答案jQuery disable SELECT options based on Radio selected (Need support for all browsers)

答案 5 :(得分:0)

最好的方法是有一个额外的选择元素:

<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/