基於用戶選擇的動態顯示一個文本框或下拉

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>