如何基于第一个数据集选择链接两个数据集

Question

在Jquery中，我只想在我的第二个datalist上显示正确链接到第一个datalist上所做选择的某些属性的结果

我尝试了很多很多事情，但我无法对第一个datalist的选定项的属性进行排序

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

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

谢谢！！

Answer 1

这里有一个简单的解决方案，但我认为最好使用一个JS对象，它具有所有的组合，根据它们的依赖关系来填充datalist

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

html prettyprint-override"><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>