Sunday, February 12, 2012

hiding and showing radio button and dropdown based on values



<select name="drop1" id='drop1'>
<option value="" selected="selected"></option>
<option value="data1">Data1</option>
<option value="data2L">Data2</option>

<select name="drop2" id='drop2'>
<option value="" selected="selected"></option>
<option value="data3">Data3</option>
<option value="data4">Data4</option>



When I select data1 and data3 from the two drop downs i need to display another dropdown below:




<div id="show_drop">
<select name="drop3" id='drop3'>
<option value="" selected="selected"></option>
<option value="data5">Data5</option>
</div>



else display radio button:




<div id="rbutton">
<input type="radio" name="yes" value="Yes" />Yes
<input type="radio" name="no" value="No" />No
</div>



I have tried the following code which works fine if i change only one drop down value. I am not sure of the synatx comparing 2 drop down values and then hiding radio button or the dropdown.




$(document).ready(function() {
$("#rbutton").hide();
$("#drop2").change(function() {
if ($("#drop2").val() == 'data2')
$("rbutton").show("fast");
else
$("#rbutton").hide("fast");
});
});

1 comment:

  1. $("#drop1,#drop2").change(function() {

    if ($("#drop1").val() == 'data1' && $("#drop2").val() == 'data2')
    $("rbutton").show("fast");
    else
    $("#rbutton").hide("fast");

    });


    is triggered when either select changed, checkes both values

    ReplyDelete