根据以前的选项自动选择HTML隐藏选项值

Question

我有2个选择标签，它们具有相同的选项，男性和女性。其中一个select，“年龄”是隐藏的。

<select name="gender"> 
    <option value="1">Male</option> 
    <option value="2">Female</option> 
</select> 

<select name="age" style="display:none;"> 
    <option value="12">Male</option> 
    <option value="18">Female</option> 
</select> 

当用户在“性别”中选择“男性”时，我希望“年龄”也会自动选择“男性”。我期待与“女性”一样的东西。如何通过javascript来实现这一点？

Answer 1

您可以将事件change附加到您选择的gender，并在每次更改时设置值为age。

请注意，如果最终用户不选择任何内容，并且还要检查将内嵌样式style="display:none;"移动到单独的css文件中，两个元素都应该加载默认的选定值。

代码：

var gender = document.getElementsByName('gender')[0], 
 
    age = document.getElementsByName('age')[0]; 
 

 
gender.addEventListener('change', function() { 
 
    age.value = (gender.value == 1) ? 12 : 18; 
 

 
    console.log('Gender:', gender.value); 
 
    console.log('Age:', age.value); 
 
});

<select name="gender"> 
 
    <option value="1">Male</option> 
 
    <option value="2">Female</option> 
 
</select> 
 

 
<select name="age" style="display:none;"> 
 
    <option value="12">Male</option> 
 
    <option value="18">Female</option> 
 
</select>

Answer 2

下面是使用jQuery的选项。

$(document).ready(function() { 
 
    $("#age").val("12"); 
 
    $("#gender").change(function() { 
 
    var userselected = $(this).find(':selected').text(); 
 
    if (userselected == "Male") { 
 
     $("#age").val("12"); 
 
    } else { 
 
     $("#age").val("18"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="gender" id="gender"> 
 
    <option value="1">Male</option> 
 
    <option value="2">Female</option> 
 
</select> 
 
<select name="age" style="display:inherit;" id="age"> 
 
    <option value="12">Male</option> 
 
    <option value="18">Female</option> 
 
</select>