Question

我想通过从另一个下拉列表中选择部门的值来制作员工的下拉列表（html <select>）。

此处，从下拉列表中选择部门，必须在下拉列表中显示该部门下的员工。

Answer 1

你应该使用AJAX。

//First combo box. where onchange event having ajax function.
<select name="parent_category" id="parent_category" onchange="change_category(this.value);" >
                                                                <option value="0">option1</option>
    <option value="1">option2</option>
    <option value="2">option3</option>
    <option value="3">option4</option>
      </select>

//Second combo box. where response of ajax call display here.
    <div class="selectbox" id="response_sub_cat">
     <select name="sub_category" id="sub_category">
     <option value="">--Choose Sub Category--</option>
     </select>
    </div>


function change_category(id)
{

        $.ajax({
            type: "POST",
            url: "ajax_get_sub_category.php?subcat="+sub_cat,
            data:   "pid=" + id,
            success: function(html){
                $("#response_sub_cat").html(html);
            }
        });
}

关于这个subcat值，php文件中应该有一个查询来获取子类别。在您的情况下，它将是department和employees

它可能对你有帮助..

Thnaks。

Answer 2

您可以使用AJAX。这是逻辑。

像这样创建一个php页面（请注意这只是参考逻辑，而不是实际代码）

<?php
$dept = $_GET['dept'];

echo '<select >';
while (....)
{
  echo "<option value=''>".$emp ."</option>".
}
?>

并调用javascript函数调用此页面并填写emp div标签。

如果您使用JQuery，可以使用简单的方法来调用和填充。

Answer 3

如果您有2-3个列表并且不想使用ajax，则应尝试http://www.bobbyvandersluis.com/articles/unobtrusive_dynamic_select/index.html

Answer 4

请尝试

var x;

$('#pu-country').on('change', function () {
    if (this.value != '0') {

        $('#pu-city').prop('disabled', false);
        $('#pu-city').find("option").not(":first").remove();
        $('#pu-location').prop('disabled', true);
        $('#pu-location').val("Choose");

        switch (this.value) {
            case 'A':
                x = '<option value="A.1">A.1</option><option value="A.2">A.2</option><option value="A.3">A.3</option>'
        }
        $('#pu-city').append(x)
    } else {
        $('#pu-location').prop('disabled', true);
        $('#pu-location').val("Choose");
        $('#pu-city').prop('disabled', true);
        $('#pu-city').val("Choose");
    }


});

$('#pu-city').on('change', function () {
    if (this.value != '0') {

        $('#pu-location').prop('disabled', false);
        $('#pu-location').find("option").not(":first").remove();

        switch (this.value) {
            case 'A.1':
                x = '<option value="A.1.1">A.1.1</option><option value="A.1.2">A.1.2</option><option value="A.1.3">A.1.3</option>'
                break;
            case 'A.2':
                x = '<option value="A.2.1">A.2.1</option><option value="A.2.2">A.2.2</option><option value="A.2.3">A.2.3</option>'
                break;
            case 'A.3':
                x = '<option value="A.3.1">A.3.1</option><option value="A.3.2">A.3.2</option><option value="A.3.3">A.3.3</option>'
                break;

        }

        $('#pu-location').append(x)
    } else {
        $('#pu-location').prop('disabled', true);
        $('#pu-location').val("Choose");
    }


});

如果您想查看演示，请尝试此处 Fiddler

如何通过从另一个下拉列表中选择值来填充下拉列表？

4 个答案: