Question

当我们在第一次输入中选择麻醉时，第二个输入应该只显示麻醉医生，当我们选择心脏病学时它应该只显示心脏病学医生等等。我应该使用Javascript或jQuery吗？请帮我找到解决方案。谢谢。

HTML

<div class="col-md-4 col-sm-12">
    <select id="dept" name="departments">
        <option selected>Anesthesiology</option>
        <option>Cardiology</option>
        <option>Dermatology</option>
    </select>
</div>
<div class="col-md-4 col-sm-12">
    <select id="doctors" class="form-control">
        <option>Anesthesiology doctor 1</option>
        <option>Anesthesiology doctor 2</option>
        <option>Cardiology doctor 1</option>
        <option>Cardiology doctor 2</option>
        <option>Dermatology doctor 1</option>
        <option>Dermatology doctor 2</option>
    </select>
</div>

Answer 1

尝试使用以下示例

这将隐藏所有选项，并仅显示包含XML下拉列表

值的那些选项

dept

然后，这将自动设置要选择的第一个可见元素，因此它会更新医生的下拉列表

var v = $(this).val()
$("#doctors option").hide()
$("#doctors option:contains(" + v + ")").show()

$('#doctors option').each(function () {
    if ($(this).css('display') != 'none') {
        $(this).prop("selected", true);
        return false;
    }
});

$('#dept').change(function() {
  var v = $(this).val()
  $("#doctors option").hide()
  $("#doctors option:contains(" + v + ")").show()
  
  $('#doctors option').each(function () {
    if ($(this).css('display') != 'none') {
        $(this).prop("selected", true);
        return false;
    }
});
})

Answer 2

这将在第一次更改时更新第二个下拉列表。

        (function () {
            var $dept = $('#dept');
            var $doctors = $('#doctors');

            $dept.on('change', onDocSelected)

            function onDocSelected() {
                var selected = $dept.val();
                $doctors.find('option').each(function (i, opt) {
                    toggle(selected, opt)
                });
            }

            function toggle(selected, opt) {
                var isApplicable = opt.text.indexOf(selected) !== -1;
                return isApplicable ? $(opt).show() : $(opt).hide();
            }
        }($))

Answer 3

检查这个

<div class="col-md-4 col-sm-12">
                                  <select id="dept" name="departments">
                                    <option></option>
                                    <option>Anesthesiology</option>
                                    <option>Cardiology</option>
                                    <option>Dermatology</option>
                                </select>
    </div>
    <div class="col-md-4 col-sm-12">
                                  <select id="doctors" class="form-control">                                   
                                </select>
    </div>

上面选择的

脚本

$(document).ready(function(){     
    var docotors = ['Anesthesiology doctor 1','Anesthesiology doctor 2','Cardiology doctor 1','Cardiology doctor 2','Dermatology doctor 1'];
    $("#dept").on("change",function(){
        var selectdDept = $(this).val();
        $("#docotrs").empty();          
        docotors.forEach(function (i) { 
                if(i.indexOf(selectdDept) >= 0){
                    $("#doctors").append('<option>'+i+'</option>');
                }
            });
        });
    });

如果你有医生名单而不是通过以下方法创建一个JSON对象，并通过选定的部门值访问它

$(document).ready(function(){     
    var docotors = {'Anesthesiology':['Anesthesiology doctor 1','Anesthesiology doctor 2'],'Cardiology':['Cardiology doctor 1','Cardiology doctor 2'],'Dermatology':['Dermatology doctor 1']};
    $("#dept").on("change",function(){
        var selectdDept = $(this).val();
        $("#doctors").empty();
        if(selectdDept){
            var selectedDeptDocotors = docotors[""+selectdDept+""];
            selectedDeptDocotors.forEach(function(i){
                $("#doctors").append('<option>'+i+'</option>');
            });
        }
    });
});

Answer 4

将类应用于第二个选择列表的选项 - 并在更改第一个选择时 - 隐藏所有选项，然后仅显示具有相应类的那些。

$(document).ready(function(){
  $('#dept').change(function(){
    var specialty = $(this).val();
    $('#doctors').val(0);
    $('#doctors option').hide();
    $('.'+ specialty).show();
   })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-12">
    <label> Select a specialty</label>
    <select id="dept" name="departments">
        <option></option>
        <option>Anesthesiology</option>
        <option>Cardiology</option>
        <option>Dermatology</option>
    </select>
</div>
<div class="col-md-4 col-sm-12">
    <label> Select a Doctor</label>
    <select id="doctors" class="form-control">
        <option></option>
        <option class="Anesthesiology">Anesthesiology doctor 1</option>
        <option class="Anesthesiology">Anesthesiology doctor 2</option>
        <option class="Cardiology">Cardiology doctor 1</option>
        <option class="Cardiology">Cardiology doctor 2</option>
        <option class="Dermatology">Dermatology doctor 1</option>
        <option class="Dermatology">Dermatology doctor 2</option>
    </select>
</div>

Answer 5

如果您想使用纯JavaScript，可以试试这个

    <div class="col-md-4 col-sm-12">
        <select id="dept" name="departments" onchange="showOptions(this)">
            <option>Select option</option>
            <option>Anesthesiology</option>
            <option>Cardiology</option>
            <option>Dermatology</option>
        </select>
    </div>
    <div class="col-md-4 col-sm-12">
        <select id="doctors" class="form-control">
        </select>
    </div>

脚本：

    var Anesthesiology = [
                    { text: "Anesthesiology doctor 1" },
                    { text: "Anesthesiology doctor 2" }];

                var Cardiology = [
                    { text: "Cardiology doctor 1" },
                    { text: "Cardiology doctor 2" }];

                var Dermatology = [
                    { text: "Dermatology doctor 1" },
                    { text: "Dermatology doctor 2" }];

                function showOptions(e) {
                    var userSelection = e.options[e.selectedIndex].text;
                    switch (userSelection) {
                        case 'Anesthesiology':
                            options(Anesthesiology);
                            break;
                        case 'Cardiology':
                            options(Cardiology);
                            break;
                        case 'Dermatology':
                            options(Dermatology);
                            break;
                        default:
                            document.getElementById('doctors').innerHTML = "";
                            break;
                    }
                }

                function options(arr) {
                    var selectList = document.getElementById('doctors');
                    var len = selectList.options.length;
                    for (var i = 0; i < arr.length; i++) {
                        for (j = 0; j < len; j++) {
                            selectList.options[j] = null;
                        }
                        var option = document.createElement("option");
                        option.text = arr[i].text;
                        selectList.appendChild(option);
                    }
                }

如何使用两个输入创建输入选项卡？

5 个答案: