Question

有谁能告诉我如何从下拉列表的选定项目中加载列表框？

假设我有一个下拉列表，其中包含“option1 = male”＆amp; “选项2 =女” 我希望在选择男性时，列表框中会显示男性员工列表。

补充说明：如果员工姓名保存在文件/数据库中，我想知道如何做到这一点？

Answer 1

我认为你希望它以异步方式填充另一个列表框？要实现这一点，您需要做的是使用JavaScript并在文档加载时调用函数。例如

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

当文档加载时，这将调用函数“exampleFunction”。在此函数中，可以放置以下代码，其中#dropdownbox将是HTML下拉框的ID。

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

这将再次调用一个函数，该函数在每次下拉框的索引更改时执行操作。在被调用函数内部，您可以将代码动态创建另一个下拉框，其中包含男性或女性员工的详细信息（或者只填充现有的下拉列表）。在函数中，您可以使用“if”语句来获取男性或女性员工，然后执行相应的代码来填充下拉列表。此函数还可以调用PHP页面，该页面可以检索数据，然后填充下拉列表。

我所描述的方式不需要刷新HTML页面。我还建议您阅读JavaScript和AJAX以及基本技术，例如填充下拉框。

Answer 2

我认为这就是你要找的东西。的 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>

Answer 3

这就是你要追求的吗？

从下拉框中选择特定选项将触发特定json文件的ajax调用。成功后，我们将文件的内容显示在列表框中。 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;
          }
      });
});

下拉列表中的列表框

3 个答案: