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架构来实现这类事情。仅在一个Dropdown中使用每个名称，并使用某些数据属性进行分类。更改性别下拉列表的值时，请使用类型进行过滤并切换选项。请遵循：

＆＃13;

$(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"); 
    });
});

＆＃13;

.hidden{
    display:none;
}

＆＃13;

<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>

＆＃13;

小提琴链接：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

试试这个：

＆＃13;

{json : true}

＆＃13;

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

＆＃13;

Answer 5

我建议您尝试这种方式：

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

Inser这个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 6

FIDDLE

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

}
});

为每个选项添加了类，因为它是静态的。然后，您可以隐藏第二个选择的选项，具体取决于第一个选择

的值

Answer 7

最佳实践：

这种情况下不要硬编码选项。最佳实践是从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的

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

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

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

7 个答案:

最佳实践：

HTML

Jquery的

的jsfiddle