сделать выбор зависимым от js

Question

Я хотел бы сделать опцию выбора, зависящую от другого select, я видел, что есть способ использовать массив с фиксированными значениями, но мой массив перезагружается каждый раз, когда мы добавляем новое поле формы в форму. Я хотел бы что-то вроде, когда я выбираю op1, тогда он просто показывает опции op1 во втором выборе.

<select id="id1" name="optionshere"> 
 
    <option relone="op1">opt one</option> 
 
    <option relone="op2">opt two</option> 
 
</select> 
 

 
<select id="id2" name="resulthere"> 
 
    <option relone="op1">ans 1 op1</option> 
 
    <option relone="op1">ans 2 op2</option> 
 
    <option relone="op2">ans 1 op2</option> 
 
</select>

Любая идея?

благодарит всех

Answer 1

Вот метод без JQuery:

При выборе параметра в первый selectbox, он скроет все, что не соответствует его relone.

var id1 = document.getElementById("id1"); 
 
var id2 = document.getElementById("id2"); 
 

 
id1.addEventListener("change", change); 
 

 
function change() { 
 
    for (var i = 0; i < id2.options.length; i++) 
 
    id2.options[i].style.display = id2.options[i].getAttribute("relone") == id1.options[id1.selectedIndex].getAttribute("relone") ? "block" : "none"; 
 
    id2.value = ""; 
 
} 
 

 
change();

<select id="id1" name="optionshere"> 
 
    <option relone="op1">opt one</option> 
 
    <option relone="op2">opt two</option> 
 
</select> 
 

 
<select id="id2" name="resulthere"> 
 
    <option relone="op1">ans 1 op1</option> 
 
    <option relone="op1">ans 2 op1</option> 
 
    <option relone="op2">ans 1 op2</option> 
 
</select>

Answer 2

Если Jquery вариант вы можете пойти с чем-то вроде этого:

<script type='text/javascript'> 
    $(function() { 
     $('#id1').change(function() { 
      var x = $(this).val(); 
      $('option[relone!=x]').each(function() { 
       $(this).hide(); 
      }); 
      $('option[relone=x]').each(function() { 
       $(this).show(); 
      }); 
     }); 
    }); 
    </script> 

Затем расширить: Там действительно много способов, которыми вы можете решить это затруднительное положение, в зависимости от насколько изменен ваш пул ответов.

Если вас интересует только ванильный javascript, то давайте начнем с основ. Вы собираетесь хотите посмотреть в «OnChange» событие для вашего HTML, так как таковой:

<select onchange="myFunction()"> 

Coming прямо из сайта w3schools, на Html OnChange атрибута события:

Атрибут onchange запускает момент, когда изменяется значение элемента .

Это позволит вам принять решение на основе значения этого элемента. Тогда внутри ваш JS может расшириться отсюда:

1. Вы можете использовать Ajax и передать ему это значение в качестве переменной GET, чтобы получить эти параметры из отдельного файла.
2. Вы можете получить все варианты из второго div с помощью комбинации .getElementbyId("id2") и .getElementsByTagName("option"), а затем проверить их индивидуальный атрибут «relone» внутри каждого цикла и скрыть те, которые не совпадают, и показать те, которые делают.

Действительно, это все зависит от того, что вы хотите сделать оттуда, но лично я бы просто пойти на Jquery подход