Jquery function when I choose a radio button it filters values

Question

Possible Duplicate:
jQuery disable SELECT options based on Radio selected (Need support for all browsers)

I have two radio buttons

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

I need a Jquery script when I choose the New radio button, that will filter the drop down list. That I'll have only the new Insurance type.

I need to filter the values in the drop down list :for example if I check New I should have Home New Insurance1 and Home New Insurance 2 — sally, Jun 16 '11 at 09:10

Niklas · Answer 1 · 2011-06-16T10:55:11.743

You can use the :contains() selector to do it like this:

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

example: http://jsfiddle.net/mknvv/21/

~~off to figure out why .siblings().show() doesn't work there...~~

edit Using sibling();

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

example: http://jsfiddle.net/mknvv/55/

score 0 · Answer 2 · answered Jun 16 '11 at 09:09

Try this JavaScript, replacing the id's to the ones you use on your page:

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

And just repeat for all the other radio buttons.

Ad@m

score 0 · Accepted Answer · answered Jun 16 '11 at 09:13

for new button add id to this radio button-

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

   })

});

do it for other radio buttons.
not tested, but i think this should work.

score 0 · Answer 4 · answered Jun 16 '11 at 09:14

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

score 0 · Answer 5 · edited May 23 '17 at 12:12

0

This is a repeated question, see the answer with function here jQuery disable SELECT options based on Radio selected (Need support for all browsers)

edited May 23 '17 at 12:12

Community

1
1

answered Jun 16 '11 at 09:19

Rakesh Sankar

9,337
4
41
66

score 0 · Answer 6 · answered Jun 16 '11 at 09:19

The best way would be to have an extra 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>

Then you could just show/hide each one when the radio box is checked:

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

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

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

});

Demo here: http://jsfiddle.net/BEC38/

Jquery function when I choose a radio button it filters values

6 Answers6