как связать 2 данных на основе первого выбора данных - PullRequest
Новая
       26

как связать 2 данных на основе первого выбора данных

0 голосов
/ 14 июня 2019

в Jquery, я хотел бы отображать на моем втором списке данных только результаты, которые правильно связаны с некоторыми атрибутами выбора, сделанного на первом списке данных

Я пробовал много вещей, но мне не удалосьсортировка по атрибутам выбранного элемента 1-го списка данных

1-й список данных выглядит следующим образом: 

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

2-й тип данных аналогичен: 

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

Мне бы хотелосьотображать второй список данных, только если настраиваемый атрибут data-prod в 1-ом списке данных == до 100

Спасибо !!

Ответы [ 2 ]

0 голосов
/ 15 июня 2019

Нашел ответ здесь: Значение выбранного

с небольшим количеством модификаций: 

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

Спасибо !!

0 голосов
/ 14 июня 2019

Вот простое решение, но я думаю, что было бы лучше использовать объект JS со всеми комбинациями для заполнения списка данных в зависимости от их зависимостей 

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