Topic: MDB SELECT : create linked select

corentin-chalhenri pro asked 6 years ago

Hi,I'm trying to add two select in a form  my website, but this two select are linked together.Let me explain this :Select1 :
  • 11 - Emballages
  • 12 - Etiquette
  • 13 - Expédition
If the user choose 11-Emballage, then  :Select2 :
  • 111 - Sale / endommagé
  • 112 - Mauvais emballage utilisé
I'm not an expert on JS or JQuery but every solution would be a huge step for me. Thx for everything,Corentin

Mirosław Stasiak free answered 6 years ago

When you select an option in the first selection and should be available second, you must remove select and then initialize it $('.mdb-select').material_select('destroy'); $('.mdb-select').material_select();

corentin-chalhenri pro commented 6 years ago

that's perfect ! thank you very much ! Can you explain me why we have to destroy a select and initialize it ? thx

Mirosław Stasiak free commented 6 years ago

When you initialized the select the first time there was only one available and only one was initialized. Then you had to delete the current select instance so that there would be no repetitions after the next select initialization.

Jawand Singh Virk free commented 6 years ago

Thanks it helped.

Hi everyone,

It seems I succeed to create the two linked select as I wanted.

But I'm facing a problem with the implementation in MDB :
The code is correct and it works well without any CSS.

But when i want to had this code in my project, i have to use the class = "mdb-select". The first select is ok, but the text in the second one appears in white. You should agree that we can't see anything with white font and white background.. ^^

If anyone as solution.

Take care everyone,


<!DOCTYPE html><!DOCTYPE html><html lang="en">

<!-- Font Awesome -->    <link rel="stylesheet" href="">
<!-- Bootstrap core CSS -->    <link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->    <link href="../css/mdb.min.css" rel="stylesheet">            <!-- JQuery -->

<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>

<script>$(function () {  $('[data-toggle="tooltip"]').tooltip()})</script>

<script language="JavaScript">

function Choix(form) {

i = form.categ.selectedIndex;if (i == 0) {

for (i=0;i<4;i++) {    form.ss_categ.options[i].text="";    }  return;  }form.ss_categ.selectedIndex = 0;

switch (i) {case 1 : var txt = new Array ('111 - Sale / endommagé','112 - Mauvais emballage utilisé','113 - Construction d’une palette non-conforme','114 - Pièces non protégées','115 - Non correctement fixé','116 - Autre','-------','-------'); break;

case 2 : var txt = new Array ('121 - Quantité non cohérente','122 - Information manquante / non lisible','123 - Manquante / format incorrect','124 - Double etiquettage','125 - L’étiquette ne correspond pas à la pièce','126 - Autre','-------','-------'); break;

case 3 : var txt = new Array ('131 - Chargement non-conforme','132 - Mauvaises pièces expédiées','133 - Quantité expédiée en dessous du beosin','134 - Quantité expédiée au-dessus du besoin ','135 - Date/Heure non respectée','136 - Document manquant / incorrect','137 - Erreur de séquencement synchrone','138 - Autre'); break;

case 4 : var txt = new Array ('141 - DESADV manquant','142 - DESADV erroné','143 - DESADV non à l’heure prévu','144 - Autre','-------','-------','-------','-------'); break;

case 5 : var txt = new Array ('151 - Non réponse du fournisseur suite à diverses sollicitations','152 - Autre','-------','-------','-------','-------','-------','-------'); break;}

form.ss_categ.options[0].text="Sous-Catégorie de l'anomalie";for (i=0;i<8;i++) {  form.ss_categ.options[i+1].text=txt[i];  }} // --></script>



<form enctype="multipart/form-data" method="POST" target="_blank" action="info2.php" >

<div class="row">

<div class="md-form col-lg-4" style="margin:auto">


<SELECT class="mdb-select" NAME="categ" onChange='Choix(this.form)'>
<OPTION>Catégorie de l'anomalie</OPTION>
<OPTION value="11 - Emballage">11 - Emballage</OPTION>
<OPTION value="12 - Etiquette"> 12 -Etiquette </OPTION>
<OPTION value="13 - Expédition">13 - Expédition</OPTION>
<OPTION value="14 - EDI">14 - EDI</OPTION>
<OPTION value="15 - Communication (Satisfaction Client)">15 - Communication (Satisfaction Client)</OPTION>

<div class="md-form col-lg-4" style="margin:auto">
<SELECT class="mdb-select"  NAME="ss_categ">
<OPTION>Sous-Catégorie de l'anomalie</OPTION>

<button type="submit" class="btn btn-elegant btn-lg" role="button" value="">Créer le PDF</button>

</div></form>         <!-- Tooltips -->    <script type="text/javascript" src="../js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->    <script type="text/javascript" src="../js/mdb.js"></script>

<script>        // SideNav init        $(".button-collapse").sideNav();        var el = document.querySelector('.custom-scrollbar');        Ps.initialize(el);    </script>
<script>        new WOW().init();    </script>



Mirosław Stasiak free answered 6 years ago

Hi, Try this: Regards,

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No