Question

  <table>
  <tr>
  <td>
  <select class="dropdown" id="a">
  <option value="">Select answer</option>
  <option value="1" >Yes</option>
  <option value="2">No</option>
  <option value="3">N.A.</option>
  </select>
  </td>
  <td>
  <select class="dropdown" id="b">
  <option value="">Select answer</option>
  <option value="1" >Yes</option>
  <option value="2">No</option>
  <option value="3">N.A.</option>
  </select>
  </td>
  </tr>
  </table>

Here is my jquery code..

$('#a').live('change',function()
{
Data=$(this).find("option:selected").text();
if(Data == "Yes")
{
    $('#b').find("option[value='1']").show();
    $('#b').find("option[value='2']").hide();
    $('#b').find("option[value='3']").hide();
}

if(Data == "No")
{
    $('#b').find("option[value='3']").hide();
    $('#b').find("option[value='1']").show();
    $('#b').find("option[value='2']").hide();
}

if(Data == "N.A.")
{
    $('#b').find("option[value='1']").hide();
    $('#b').find("option[value='2']").hide();
    $('#b').find("option[value='3']").show();
}
});

My requirement is to display only selected items in the first dropdown…

Answer 1

You’ve assigned your variable called Dat and are then checking it’s value using if(Data == "Yes")

It’d probably be easier not to assign variable at all in this case, by using a switch statement

$('#a').live('change',function()
{
switch($(this).find("option:selected").text()) {
  case "Yes":
    $('#b').find("option[value='1']").show();
    $('#b').find("option[value='2']").hide();
    $('#b').find("option[value='3']").hide();
    break;

  case "No":
    $('#b').find("option[value='3']").hide();
    $('#b').find("option[value='1']").show();
    $('#b').find("option[value='2']").hide();
    break;

  case "N.A.":
    $('#b').find("option[value='1']").hide();
    $('#b').find("option[value='2']").hide();
    $('#b').find("option[value='3']").show();
}
});