下拉列表中的列表框

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>