根据其他选定的选项框更改选择框的值

就这样了DEMO

var options=""; //store the dynamic options
$("#gender").on('change',function(){ //add a change event handler to gender select
    var value=$(this).val(); //get its selected value
    options="<option>Select Your Name</option>"
    if(value=="Male") //value ==Male then set male required options
    {
        options+="<option value='Male1'>Male 1</option>"
                +"<option value='Male2'>Male 2</option>";
        $("#name").html(options);
    }
    else if(value=="Female") //else set female required options
    {
        options+='<option value="female1">Female 1</option>'
                 +'<option value="female2">Female 2</option>';
        $("#name").html(options);
    }
    else
        $("#name").find('option').remove() //if first default text option is selected empty the select
});

我建议有一个更好的HTML架构来实现这类事情。将每个名称仅放在一个下拉列表中，并使用一些数据属性进行分类。当更改Gender下拉列表的值时，使用类型进行过滤并切换选项。遵循这个:

$(function(){
	$("#gender").on("change", function(){
        var $target = $("#name").val(""),
            gender = $(this).val();
        
        $target
            .toggleClass("hidden", gender === "")
            .find("option:gt(0)").addClass("hidden")
        	.siblings().filter("[data-type="+gender+"]").removeClass("hidden"); 
    });
});

.hidden{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="gender">
        <option value="">Select Your Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
</select> 
<select id="name" class="hidden">
        <option value="">Select Your Name</option>
        <option value="Male1" data-type="Male">Male 1</option>
        <option value="Male2" data-type="Male">Male 2</option>
        <option value="female1" data-type="Female">Female 1</option>
        <option value="female2" data-type="Female">Female 2</option>
</select>

提琴链接:http://jsfiddle.net/ashishanexpert/qzxedcut/

每当发生更改时，使用性别下拉框的值填充名称。我们使用for循环为每个性别生成多个选项。

$('#gender').change(function(){
   if(!this.selectedIndex) return;
   var gender = $(this).val(),
       $name = $('#name').empty(),
       $option = $('<option />').text('Select Your Name').appendTo($name);
   for(var i = 1; i <= 2; i++)
       $option.clone().prop('value', gender + i).text(gender + ' ' + i).appendTo($name);
});

JSFiddle

遵循惯例:

• 在这种情况下不要硬编码选项。最佳实践是从Json中获取值。
• 以后的更改很容易，而不是更改所有编码。
• 构建动态下拉菜单。不要隐藏和显示。

HTML

<select id="gender">
        <option>Select Your Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
</select>   
    <select id="gtr" name="location" placeholder="Anycity"></select>

jQuery(function($) {
    var gender = {
        'Male': ['Male1', 'male2'],
        'Female': ['Female1','Female1'],
      
    }
    
    var $gndr = $('#gtr');
    $('#gender').change(function () { debugger
        var GNDR = $(this).val(), gndrs = gender[GNDR] || [];
        
        var html = $.map(gndrs, function(gndr){
            return '<option value="' + gndr + '">' + gndr + '</option>'
        }).join('');
        $gndr.html(html);$gndr.append(new Option("Select Name", "0"));$gndr.val("0");
    });
});

JsFiddle

我建议你试试这样做:

更改jquery:

<select id="nameMale">
        <option>Select Your Name</option>
        <option value="Male1">Male 1</option>
        <option value="Male2">Male 2</option>
</select> 
<select id="nameFemale">
        <option>Select Your Name</option>
        <option value="Male1">Male 1</option>
        <option value="Male2">Male 2</option>
</select> 

插入此javascript:

        <script>
            <![CDATA[
                $(function() {
              $('#nameFemale').hide();
              $('#nameMale').hide();
  function changeGen(val){
     if(val == 'Female'){
         $('#nameFemale').show();
         $('#nameMale').hide();
      }else{
        $('#nameFemale').hide();
        $('#nameMale').show();
      }
  }
  $('#gender').change(function() {
            changeGen($('#gender').val());
    });
    });
 ]]>    
</script> 

$('#gender').change(function (e) {
    var val = $("option:selected", this).val()
    console.log(val);
if(val =='Male'){
    $('#name').find('option.female').hide();
    $('#name').find('option.male').show();
}else if(val =='Female'){
    $('#name').find('option.female').show();
    $('#name').find('option.male').hide();
}else{
    
}
});

为每个选项添加类，因为它是静态的。然后，您可以根据第一次选择

试试这个:

$("#gender").on("change",function(){
  var sel="";
  if($(this).val() == "Female"){
    sel=' <option>Select Your Name</option>';
       sel+=' <option value="female1">Female 1</option>'
        sel+='<option value="female2">Female 2</option>'
   
    }else{// no other if since you have only two options male/female
     sel= '<option>Select Your Name</option>';
       sel+= '<option value="Male1">Male 1</option>';
       sel+= '<option value="Male2">Male 2</option>';
      }
   $("#name").html(sel);
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="gender">
        <option>Select Your Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
</select>   
<select id="name">
     
</select>