How to show multiple select options when user select multiple options and when unselect it still hide and reset!!!?? jquery

All we need is an easy explanation of the problem, so here it is.

I have select options contains languages, it’s supposedly that user choose multiple options (languages) or an option (language), and i want user when choose an option (language), new select option shows, and contains his level in that language.

when user select multiple languages (english, arabic, france), three select option show, his level in these language, and when unselect any options, it’s supposed to, the select option (that contains his level in that language) become hidden and reset (return to default select (first option)).

but i’ve some problems in my code

1- when user select multiple options, multiple select options that contains his level don’t show all at once.

2- when user unselect an option it stills show and not reset (return to default select (first option))?!!

could you help me please

my view blade with script:

@extends('layouts.app')
    @section('content')
    
        <form>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="languages">Languages</label>
                    <select id="languages" class="form-control" multiple>
                        <option>Choose Language...</option>
                        <option value="1">English</option>
                        <option value="2">Arabic</option>
                        <option value="3">France</option>
                        <option value="4">Espanole</option>
                    </select>
                </div>
            </div>
    
            <div id="arabicShow" style="display: none" class="form-row">
                <div id="" class="form-group col-md-6">
                    <label for="arabic">Arabic level</label>
                    <select id="arabic" class="form-control">
                        <option value='' selected>Choose Your level...</option>
                        <option value='' >a</option>
                        <option value=''>b</option>
                    </select>
                </div>
            </div>

            <div id="englishShow" style="display: none" class="form-row">
                <div class="form-group col-md-6">
                    <label for="english">English level</label>
                    <select class="form-control">
                        <option value=''>Choose Your level...</option>
                        <option value='' >a</option>
                        <option value=''>b</option>
                    </select>
                </div>
            </div>

            <div id="franceShow" style="display: none" class="form-row">
                <div class="form-group col-md-6">
                    <label for="france">France level</label>
                    <select class="form-control">
                        <option value=''>Choose Your level...</option>
                        <option value='' >a</option>
                        <option value=''>b</option>
                    </select>
                </div>
            </div>
    
    
            <button type="submit" class="btn btn-primary">Save</button>
        </form>
    
    @stop
    @section('script')
        <script type="text/javascript">

            $(document).ready(function (){
                $( "#languages option:first-child" ).attr("disabled","disabled");
                $( "#arabic option:first-child" ).attr("disabled","disabled");
                $( "#english option:first-child" ).attr("disabled","disabled");
                $( "#france option:first-child" ).attr("disabled","disabled");

                $('#languages').change(function(){
                    var text = $(this).find("option:selected").text().trim(); //get text
                    if(text === "Arabic"){
                        $('#arabicShow').show();
                 
                    }else if(text === "English"){
                        $('#englishShow').show();
                    }else if(text === "France"){
                    $('#franceShow').show();
                }else {
                        $('#arabicShow').hide();
                        $('#englishShow').hide();//hide
                    }
                });
            });
        </script>
    
    @stop

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You can use .each loop to iterate through all selected options and then depending on condition show require select-boxes.

Demo Code :

$(document).ready(function() {
  $("#languages option:first-child").attr("disabled", "disabled");
  $("#arabic option:first-child").attr("disabled", "disabled");
  $("#english option:first-child").attr("disabled", "disabled");
  $("#france option:first-child").attr("disabled", "disabled");
  $('.selects').hide(); //hide all
  $('#languages').change(function() {
    $('.selects select:not(:visible)').val(""); //reset 
    $('.selects').hide(); //hide all
    //loop through all selected options..
    $(this).find("option:selected").each(function() {
      var text = $(this).text()
      if (text === "Arabic") {
        $('#arabicShow').show();
      } else if (text === "English") {
        $('#englishShow').show();
      } else if (text === "France") {
        $('#franceShow').show();
      }
    })

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="languages">Languages</label>
      <select id="languages" class="form-control" multiple>
        <option>Choose Language...</option>
        <option value="1">English</option>
        <option value="2">Arabic</option>
        <option value="3">France</option>
      </select>
    </div>
  </div>
  <!--added one common class i.e : selects-->
  <div id="arabicShow" class="form-row selects">
    <div id="" class="form-group col-md-6">
      <label for="arabic">Arabic level</label>
      <select id="arabic" class="form-control">
        <option value='' selected>Choose Your level...</option>
        <option value=''>a</option>
        <option value=''>b</option>
      </select>
    </div>
  </div>

  <div id="englishShow" class="form-row selects">
    <div class="form-group col-md-6">
      <label for="english">English level</label>
      <select class="form-control">
        <option value=''>Choose Your level...</option>
        <option value=''>a</option>
        <option value=''>b</option>
      </select>
    </div>
  </div>
  <div id="franceShow" class="form-row selects">
    <div class="form-group col-md-6">
      <label for="france">France level</label>
      <select class="form-control">
        <option value=''>Choose Your level...</option>
        <option value=''>a</option>
        <option value=''>b</option>
      </select>
    </div>
  </div>


  <button type="submit" class="btn btn-primary">Save</button>
</form>

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂