基于用户选择的动态显示一个文本框或下拉

Question

在我的HTML页面，我有一个包含2个值的下拉 - 姓名和性别

如果用户选择在下拉菜单中“姓名”，然后一个文本框（默认控制）以允许输入自由流动的文本。

但是，如果用户在下拉菜单中选择“性别”，则会显示一个下拉菜单，以允许用户从2个值中选择 - 男性和女性。

基本上我需要在文本框和下拉式的脚本/ Javascript中开发一个切换功能来实现这一点。由于我在JavaScript方面的知识有限，我尝试了多种解决方案，但没有取得任何成功任何帮助将不胜感激。

Answer 1

一个简单的演示：

$("#switch").change(function() { 
 
    switch($("#switch").val()) { 
 
    case "name": 
 
     $("#name-input").css("display", "inline") 
 
     $("#gender-dropdown").css("display", "none") 
 
     break 
 
    case "gender": 
 
     $("#name-input").css("display", "none") 
 
     $("#gender-dropdown").css("display", "inline") 
 
     break 
 
    default: 
 
     $("#gender-dropdown").css("display", "none") 
 
     $("#name-input").css("display", "none") 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="switch"> 
 
<option value="unknown"></option> 
 
<option value="name">Name: </option> 
 
<option value="gender">Gender: </option> 
 
</select> 
 
<span id="name-input" style="display:none"><input type="text" id="name"></span> 
 
<span id="gender-dropdown" style="display:none"> 
 
<select id="gender"> 
 
<option></option> 
 
<option>Male</option> 
 
<option>Female</option> 
 
</select></span>