how to link 2 datalists based on 1st datalist selection

Question

in Jquery, I would like to only display on my 2nd datalist the results that are correctly linked to some attributes of the selection made on the 1st datalist

I tried many many things but I do not manage to sort on the attributes of the selected item of the 1st datalist

1st datalist is like that:

<input id="boxCli" name="cat1" list="cat1" placeholder="Catégorie 1">
     <datalist id="cat1">
        <option  data-prod="100" value="Chef de Projet">Chef de Projet</option>
        <option  data-prod="50" value="Mécanique">Mécanique</option>
    </datalist>

2nd datalist is similar:

<input id="boxCli2" class="box2" name ="cat2" list="cat2" placeholder="Catégorie 2"> 
     <datalist id="cat2">
          <option data-cat="1" value="Gestion de projet">Gestion de projet</option>
          <option data-cat="1" value="Réunion / Client">Réunion / Client</option>
     </datalist>

I would like to display the second datalist only if the custom attribute data-prod in 1st datalist is == to 100

Thanks !!

score 0 · Answer 1 · answered Jun 14 '19 at 16:22

Here is a simple solution, but I think it would be better to use a JS object with all the combinations to fill the datalist depending on their dependencies

const MyForm  = document.querySelector('#my-form')
,     AllCat2 = document.querySelectorAll('#cat2 option')
;


MyForm.onchange =e=>{
  let ON_OFF = (MyForm.cat1.value !=='Chef de Projet')
  AllCat2.forEach(cO=>  cO.disabled = ON_OFF )
}

<form id="my-form">
  
    cat1 :
  <input id="boxCli" name="cat1" list="cat1" placeholder="Catégorie 1">
  <datalist id="cat1">
      <option  data-prod="100" value="Chef de Projet">Chef de Projet</option>
      <option  data-prod="50" value="Mécanique">Mécanique</option>
  </datalist>
<br>
  cat2:
<input id="boxCli2" class="box2" name ="cat2" list="cat2" placeholder="Catégorie 2"> 
  <datalist id="cat2">
        <option data-cat="1" value="Gestion de projet">Gestion de projet</option>
        <option data-cat="1" value="Réunion / Client">Réunion / Client</option>
  </datalist>
  
</form>

Thanks for your answer and proposal. The issue is that I will have other cat1 options whose dat-prod values will be as well 100. So filtering on 'Chef de Projet' is not enough. I would definitely need to filter on the data-prod tag. Any idea ? — JDEC, Jun 15 '19 at 08:42

score 0 · Answer 2 · answered Jun 15 '19 at 09:04

0

Found the answer here:Value of selected <datalist> item

with a bit of modifications :

var g =  ($this).val(); 
var valueProd = $('#cat1').find('option').filter(function() { return $.trim( $(this).text() ) === g; }).attr('data-prod');

Thanks !!

answered Jun 15 '19 at 09:04

JDEC

93
8

how to link 2 datalists based on 1st datalist selection

2 Answers2