下拉列表中的列表框

Question

任何人都可以告訴我如何從下拉列表中選擇的項目加載列表框？

比方說，我有一個包含「選項1 =男」 &「選項2 =女」 我想要選擇男性時，在列表框中顯示男性僱員的列表的下拉列表。

添加了注意事項： 我想知道我怎麼能做到這一點，如果員工的名字保存在文件/數據庫？

Answer 1

這是你在追求什麼？

從下拉框中選擇一個特定的選項將觸發Ajax調用特定JSON文件。成功時，我們將文件內容顯示在列表框中。 This只是一個演示。

代碼示例：

$(document).ready(function() { 
     var listbox = $('#listbox'), 
      populateListbox = function(data) { 
       for (var i = 0, item; i < data.length; i++) { 
       item = data[i]; 

       var option = $('<option>').val(item.age).text(item.name); 

       listbox.append(option); 
       } 

       showListbox(); 
      }, 
      emptyListBox = function() { 
       listbox.empty(); 
      }, 
      showListbox = function() { 
       listbox.removeClass('hide'); 
      }, 
      hideListbox = function() { 
       listbox.addClass('hide'); 
      }; 

     $('#dropdown').on('change', function (e) { 
     emptyListBox(); 
     hideListbox(); 

     var selectedOption = $("option:selected", this), 
      selectedValue = this.value; 

      switch (selectedValue) { 
      case 'male': 
       $.getJSON("male.json", populateListbox); 
       break; 
      case 'female': 
       $.getJSON("female.json", populateListbox); 
       break; 
      } 
     }); 
}); 

Answer 2

我推測，你想讓它異步填充另一個列表框？你需要做的就是使用JavaScript並在文檔加載時調用一個函數。例如

$(document).ready(function(){ 
    exampleFucntion(); 
    }); 

這將在文檔加載時調用函數「exampleFunction」。在這個函數裏面，下面的代碼可以放在#dropdownbox是你的HTML下拉框的ID。

$("#dropdownbox").change(exampleOnDropDownChanged); 

這又會調用一個函數，每次下拉框的索引更改時執行一個操作。在被調用函數內部，您可以將代碼動態地與男性或女性員工的詳細信息（或僅填充現有下拉列表）一起創建另一個下拉框。在這個函數中，你可以用'if'語句來獲得男性或女性僱員，然後執行相應的代碼來填充下拉菜單。這個函數也可以調用一個可以檢索數據然後填充下拉菜單的PHP頁面。

我所描述不需要HTML頁面被刷新的方式。我還建議您閱讀JavaScript和AJAX以及基本技術，例如填充下拉框。

Answer 3

我認爲這是你在找什麼。 DEMO HERE 選擇您的性別並顯示相關的列表框。

<form id="survey" action="#" method="post"> 
    <div id="section1"> 
     <label for="Gender">Select employee gender.</label> 
     <select id="Gender" onchange="selection(this);"> 
      <option value="Gender">---Select---</option> 
      <option value="Male">Male</option> 
      <option value="Female">Female</option> 
     </select> 
    </div> 
    <div id="section2" style="display:none;">Please select employee gender from above.</div> 
    <div id="section3" style="display:none;">Male Employees 
     <br /> 
     <label for="Jim">Jim</label> 
     <input type="radio" id="Jim" /> 
     <label for="Tom">Tom</label> 
     <input type="radio" id="Tom" /> 
     <label for="Sam">Sam</label> 
     <input type="radio" id="Sam" /> 
    </div> 
    <div id="section4" style="display:none;">Female Employees<br /> 
     <label for="Kate">Kate</label> 
     <input type="radio" id="Kate" /> 
     <label for="Claire">Claire</label> 
     <input type="radio" id="Claire" /> 
     <label for="Sue">Sue</label> 
     <input type="radio" id="Sue" /> 
    </div> 
</form> 

<script> 
var sections = { 
    'Gender': 'section2', 
     'Male': 'section3', 
     'Female': 'section4' 
}; 

var selection = function (select) { 

    for (var i in sections) 
    document.getElementById(sections[i]).style.display = "none"; 

    document.getElementById(sections[select.value]).style.display = "block"; 

}; 
</script>