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

Question

我是 Javascript/Jquery 的新手

所以我的问题是：我想根据其他选定的选项/框更改选择/选项框的文本和值

所以例如我的第一个选择是：

<select id="gender">
        <option>Select Your Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
</select>   

然后我想根据所选选项更改的一个是：当它是男性时：

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

当它是女性时：

<select id="name">
        <option>Select Your Name</option>
        <option value="female1">Female 1</option>
        <option value="female2">Female 2</option>
</select>   

谢谢您的帮助！ :)

Answer 1

有了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
});

Answer 2

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

 $(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/

Answer 3

每当发生更改时，请使用性别下拉列表的值来填充名称。 我们使用 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

Answer 4

遵循实践：

• 在这种情况下不要对选项进行硬编码。最佳实践是从 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");
    });
});

提琴手

https://jsfiddle.net/2pza5/1135/

Answer 5

尝试这个：

 $("#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>

Answer 6

我建议你试试这种方式：

改变你的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> 

Answer 7

小提琴

$('#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{
    
}
});

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