Geek Answers Handbook

How to make input tabs using two inputs?

When we choose Anesthesiology at the first input, only the doctors of anesthesiology should show the second entrance, when we choose Cardiology, it should only show the doctors of cardiology and so on. Should I use javascript or jQuery for this? Please help me find a solution for this. Thanks.

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>
0
source share
5 answers

Try using the following example,

This will hide all options and display only those that contain the value from the drop-down list. dept

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

Then the first visible item to be selected will be automatically set, so it updates the drop-down list of doctors

$('#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;
    }
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
Hide result
0

.

        (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();
            }
        }($))
0

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

script

$(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>');
                }
            });
        });
    });

If you have a list of doctors names, than creating a JSON object using the method below and accessing it using the selected department value

$(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>');
            });
        }
    });
});
0
source

Apply the class to the parameters of the second selection list - and when changing the first choice - hide all the parameters and then show only those that have the corresponding class.

$(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>
Run codeHide result
0
source

If you want to do this with pure javascript, you can 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>

SCENARIOS:

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

More articles:


All Articles