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

【问题标题】：Change select box value depending other selected option box根据其他选定的选项框更改选择框值
【发布时间】：2015-09-18 09:25:19
【问题描述】：

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

感谢您的帮助！ :)

【问题讨论】：

男女选择框值是动态的还是静态的？
@Shehary : 它的静态 :)

标签： javascript jquery html

【解决方案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
});

【讨论】：

嗨@GuruprasadRao，这回答了我的问题。因为它只是一个示例数据，而实际的选项取决于另外两件事（选择和收音机）我应该创建另一个问题还是应该更新我的问题？无论如何，js/jquery 是如何实际保存价值的？我的意思是在 php 中我可以将值保存在 $value1 和 $value2 然后添加 if 语句，如 ( if($value1='') 和 if($value2 ==''){} ，我怎么能在 js 中做到这一点？谢谢！
@bhebhe.. 为此，您可能需要为此创建不同的问题。关于您的第二个疑问，例如 $value1 中的保存选项等尚不清楚..您能详细说明一下吗？
@GuruprasadRao 好的，我的意思是在 PHP 中我可以执行以下操作： $a = 'value from option 1"; $b = 'value from checkbox'; 然后基于此我可以定义其他 Select 或选项的值，例如 = if($a == 'example 1') and ($b == 'example 2'){ "content "; } else.. etc ，我怎么能在 JS 上做到这一点? 我看到你这样做“var value=$(this).val();”我如何从其他#id 中保存值，然后在 IF 语句> if(value=="Male") 和 (value2 = ="某事"); 也许
对于其他id，您可能还想再写一个event handler，就像上面写的一样...

【解决方案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/

【讨论】：

感谢您的回答，我尝试使用小提琴，但这会显示所有名称，而不仅仅是男性或女性，我做错了吗？

【解决方案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

【讨论】：

哇.. 真棒@George，但当用户选择默认文本作为选项时，您可能需要考虑.. :)
@GuruprasadRao 当然可以。
另外，名字将是真实的名字而不是 1,2,3 的东西....循环不是一个好主意。
@AshishKumar 也许我从字面上看这个问题有点过头了。

【解决方案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

>

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/

【讨论】：

【解决方案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>

插入这个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>

【讨论】：

【解决方案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{
    
}
});

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

【讨论】：

这是独一无二的@Shehary 只是隐藏和显示的东西
提醒未来的学习者，这个例子在 Safari 上不起作用 :) 我花了很多时间弄清楚为什么它在我的 Mac 上不起作用，然后我在 Chrome 中打开一切都很好

【解决方案7】：

试试这个：

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

【讨论】：