Javascript: удалить различные теги опций из выпадающего списка в зависимости от другого выпадающего списка?

Question

Да, название - беспорядок.

Вот что я пытаюсь сделать: У меня есть один основной выпадающий список, где я могу выбрать, скажем, два варианта. Вариант1 и Вариант2. Если выбран вариант 1, я не хочу, чтобы что-то случилось. Если выбрана опция Option2, я хочу удалить одну метку опции из другого выпадающего списка.

<select name="main_dropdown">
    <option value="Option1">Option 1</option>
    <option value="Option2">Option 2</option>
</select>

<select name="secondary_dropdown">
    <option value="Option1">Option 1</option>
    <option value="Option2">Option 2</option> // Let's say i want to remove this option tag if Option2 in main_dropdown is selected.
    <option value="Option2">Option 2</option>
</select>

Спасибо!

Answer 1

Я думаю, вы получите лучшие ответы и больше внимания, если ваши вопросы включают в себя код, демонстрирующий ваши собственные попытки найти ответ, вместо того, чтобы просить других написать код, который вам нужен.Не только потому, что люди не хотят чувствовать, что они делают свободную работу, но также становится намного труднее отвечать.

Например, хотя то, что вы пытаетесь сделать, это довольно простой javascript, есть десятки различных способов, которые вы можете решить.Вот быстрый рабочий ответ на ваш вопрос (с использованием jQuery):

<script>
  $(document).ready(function(){
    $('select[name=main_dropdown]').bind('change',function(){
      if($(this).val() == 'Option2') $('select[name=secondary_dropdown] option[value=Option2]').remove();
    });   
  });
</script>

<select name="main_dropdown">
    <option value="Option1">Option 1</option>
    <option value="Option2">Option 2</option>
</select>

<select name="secondary_dropdown">
    <option value="Option1">Option 1</option>
    <option value="Option2">Option 2</option> // Let's say i want to remove this option tag if Option2 in main_dropdown is selected.
    <option value="Option2">Option 2</option>
</select>

Посмотрите на него в действии.

Тем не менее, это решение невероятно хрупкое.Он будет делать то, что вы хотите в этом случае , но это не очень хорошее решение, если ваши отношения изменятся, или код станет более сложным и т. Д. Без примера кода невозможно определить, по каким критериям вы 'Я использую его для нацеливания опций и удаления их, так что это не принесет вам пользы.

Я рекомендую начать с библиотеки jQuery , в которой есть несколько замечательных Tutorials ,Вы должны быть в состоянии решить такие проблемы самостоятельно довольно быстро, если вы решите.Если ваш код в конечном итоге не работает, и вы не знаете, куда обратиться, не бойтесь - я уверен, что люди здесь будут рады помочь вам.

Answer 2

<option value="Option2" id="ToBeOrNotToBe">Option 2</option>

Если значением main_dropdown является «Option2» (сделать сравнение), удалите document.getElementById («ToBeOrNotToBe») из «second_dropdown» с помощью .removeChild ().Я бы предложил дать всем вашим селекторам уникальный идентификатор, а также имя, чтобы вы могли использовать document.getElementById (), чтобы получить ваш элемент, а затем манипулировать всем, используя .removeChild ().Параметр, который вы передадите в removeChild (), будет вашим вариантом2.

Тем не менее, removeChild () возвращает объект, который он удаляет, поэтому сохраните его в другой переменной, поэтому, если пользователь передумает с главным выпадающим списком, appendChild () удаляет option2 в качестве дочернего элемента для "second_dropdown"".

Кроме того, по моему мнению, сначала создайте основной раскрывающийся список, а после того, как они выбрали значение, затем создайте второй раскрывающийся список с помощью appendChild () в самом документе.Если вы посмотрите, http://www.w3schools.com/tags/tag_option.asp показывает слушателей событий, которые вы можете прикрепить к опциям, поэтому после выбора опции вставьте второй выпадающий список ниже первого и создайте его соответствующим образом.

Если вы просто хотите быстрое и простое решение, используйте прослушиватель событий, чтобы активировать, когда выбран параметр в главном раскрывающемся списке, затем удалите параметр 2 или добавьте его соответственно.