如何使用两个输入制作输入标签？

问题描述

当我们在第一次输入中选择麻醉科时，第二次输入应该只显示麻醉科医生，当我们选择心脏科时应该只显示心脏科医生等等。我应该使用JavaScript还是jQuery？请帮我找出解决办法。
$ b

HTML

  < div class =col-md-4 col-sm-12> 
< select id =deptname =departments> 
< option selected>麻醉学< / option> 
< option> Cardiology< / option> 
< option>皮肤科< / option> 
< / select> 
< / div> 
< div class =col-md-4 col-sm-12> 
< select id =doctorsclass =form-control> 
< option>麻醉科医生1< / option> 
< option>麻醉科医生2< / option> 
< option>心脏科医生1< / option> 
< option>心脏科医生2< / option> 
< option> Dermatology doctor 1< / option> 
< option>皮肤科医生2< / option> 
< / select> 
< / div> 
  

解决方案

如果您想使用纯javascript，试试这个

 < div class =col-md-4 col-sm-12> 
 < option>选择选项< / option> 
< option>麻醉学< / option> 
< option> Cardiology< / option> 
< option>皮肤科< / option> 
< / select> 
< / div> 
< div class =col-md-4 col-sm-12> 
< select id =doctorsclass =form-control> 
< / select> 
< / div> 
  

脚本：

  var anesthesiology = [
 {text：Anesthesiology doctor 1}，
 {text：Anesthesiology doctor 2}]; 
 
 var心脏病学= [
 {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）; 
休息; 
案例'心脏病学'：
选项（心脏病学）; 
休息; 
 case'Dermatology'：
 options（Dermatology）; 
休息; 
默认值：
 document.getElementById（'doctors'）。innerHTML =; 
休息; 
 
 
 
函数选项（arr）{
 var selectlist = document.getElementById（'doctors'）; 
 var len = selectList.options.length;对于（j = 0; j  selectList.options [j] = 1，
为（var i = 0; i } 
 var option = document.createElement（option）; 
 option.text = arr [i] .text; 
 selectList.appendChild（option）; 
} 
} 
  

When we select Anesthesiology in first input, the second input should only show Anesthesiology doctors, when we select Cardiology it should only show Cardiology doctors and so on. Should I use Javascript or jQuery for this? Please help me to find out solution for this. Thank you.

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>

解决方案

If you want to do with pure javascript, you may try this

    <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>

SCRIPTS:

    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);
                    }
                }

这篇关于如何使用两个输入制作输入标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！