MDB SELECT : create linked select

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

Add comment

Mirosław Stasiak free answered 6 years ago

0 0 Best answer

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.

Add comment

corentin-chalhenri pro answered 6 years ago

0 0 Best answer

<p>Hi everyone,</p>
<p>It seems I succeed to create the two linked select as I wanted.</p>
<p>But I'm facing a problem with the implementation in MDB :<br />
The code is correct and it works well without any CSS.</p>
<p>But when i want to had this code in my project, i have to use the class = "mdb-select". The first <em>select</em> 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.. ^^</p>
<p>If anyone as solution.</p>
<p>Take care everyone,<br />
Thx,</p>
<p>Corentin</p>
<pre><!DOCTYPE html><!DOCTYPE html><html lang="en">
<head>

src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/mdb.min.css" rel="stylesheet">

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>

</head>

<body>

<TD>

<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>
</SELECT>
</TD>
</div>

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

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

</div></form>             <script type="text/javascript" src="../js/tether.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/mdb.js"></script>

</body>
</html></pre>
<pre></pre>

Please insert min. 20 characters.

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

Corentin

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

src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Font Awesome -->    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- 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>

</head>

<body>

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

<TD>

<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>
</SELECT>
</TD>
</div>

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

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

</body>
</html>

Add comment

Mirosław Stasiak free answered 6 years ago

0 0 Best answer

Hi, Try this: http://plugins.krajee.com/dependent-dropdown/demo Regards,

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

corentin-chalhenri

Pro User -3Support score
3Questions 2Answers 0Snippets