2011-06-16 43 views
0

可能重複:
jQuery disable SELECT options based on Radio selected (Need support for all browsers)jQuery函數它過濾單選按鈕值

我有兩個單選按鈕

<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腳本時我選擇新的單選按鈕,它將過濾下拉列表。我將只有新的保險類型。

+0

? – Vivek 2011-06-16 09:08:35

+0

我需要過濾下拉列表中的值:例如,如果我檢查新的,我應該有家庭新保險1和家庭新保險2 – sally 2011-06-16 09:10:52

回答

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(); 
     } 

    }) 

}); 

做其他單選按鈕。
未測試,但我認爲這應該工作。

0

嘗試這個JavaScript,更換ID對您的網頁上使用的:

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

而只是重複所有其他單選按鈕。

廣告@米

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

2

可以使用: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/

0

功能的答案,最好的辦法是將有一個額外的select element:

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