Set Selected Value For Dropdowns

The below code works only 1 time not every time var selectedVal = $('#drpGender_0').find('option:selected').text(); if (selectedVal == 'Male') { $('#drpGender_1').fi

Solution 1:

$('#drpGender_0').on('change', function() {
  var selectedVal = $('#drpGender_0').val();

  if (selectedVal == "Male") {
    $('#drpGender_1').val('Female');
  } elseif (selectedVal == "Female") {
    $('#drpGender_1').val('Male');
  }
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><selectid="drpGender_0"><optionvalue="">Select Gender</option><optionvalue="Male">Male</option><optionvalue="Female">Female</option></select><selectid="drpGender_1"><optionvalue="">Select Gender</option><optionvalue="Male">Male</option><optionvalue="Female">Female</option></select>

you can also use code

$('#drpGender_0').on('change', function() {
  var selectedVal = $('#drpGender_0').val();

  if (selectedVal == "Male") {
    $('#drpGender_1').find("option:contains('Female')").attr("selected", "selected");

  } elseif (selectedVal == "Female") {
    $('#drpGender_1').find("option:contains('Male')").attr("selected", "selected");
  }
});

Solution 2:

Try this code:

$('#drpGender_0').on('change', function() {

    if (this.value == "Male") {
        $('#drpGender_1').find("option:contains('Male')").text('Male').attr("select    ed", false);
        $('#drpGender_1').find("option:contains('Female')").text('Female').attr("selected", "selected");
    }
    elseif (this.value == "Female") {

        $('#drpGender_1').find("option:contains('Female')").text('Female').attr("selected", false);
        $('#drpGender_1').find("option:contains('Male')").text('Male').attr("selected", "selected");

    }

});