Два поля выбора, зависящие друг от друга

Question

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

Что делает все это труднее, так это то, что я не могу добавить какие-либо классы или идентификаторы или что-то на самом деле здесь.

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

HTML

<select name="NameOne"> 
    <option value="First">Lorem Ipsum1</option> 
    <option value="Second">Lorem Ipsum2</option> 
    <option value="Third">Lorem Ipsum3</option> 
    <option value="CD">Dolor2</option> 
</select> 

<select name="NameTwo"> 
    <option value="AB">Dolor1</option> 
    <option value="CD">Dolor2</option> 
    <option value="EF">Dolor3</option> 
</select> 

JS

$("select").change(function(){ 
    if($(this).val() == "Second") { 
    $('option[value="CD"]', this).addClass('hidden'); 
    } else { 
    $('option[value="CD"]', this).removeClass('hidden'); 
    } 
}); 

CSS

.hidden { 
    display: none 
} 

Пожалуйста, помогите.

Answer 1

Это не работает из-за этого кода здесь:

$('option[value="CD"]', this)... 

Простыми словами, this проверяет опции на выбор, который в настоящее время щелкнули. Поскольку вы нажали на первый выбор, this станет первым выбором и пытается найти параметр со значениями CD на нем, которого нет. Так, что вы делаете?? Простой, получить второй выбор, найти опцию значений CD в нем и изменить класс :)

Попробуйте

// you can change this to select first select only since selecting all the select doesnot make sense. 
 
$("select").change(function(){ 
 
//$("select[name='NameOne']").change(function(){ <--- better 
 
    var secondSelect = $("select[name='NameTwo']"); //get second select 
 
    if($(this).val() == "Second") { 
 
    secondSelect.find('option[value="CD"]').addClass('hidden'); //find option with CD and add Class 
 
    } else { 
 
    secondSelect.find('option[value="CD"]').removeClass('hidden'); 
 
    } 
 
});

.hidden { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="NameOne"> 
 
    <option value="First">Lorem Ipsum1</option> 
 
    <option value="Second">Lorem Ipsum2</option> 
 
    <option value="Third">Lorem Ipsum3</option> 
 
    <option value="CD">Dolor2</option> 
 
</select> 
 

 
<select name="NameTwo"> 
 
    <option value="AB">Dolor1</option> 
 
    <option value="CD">Dolor2</option> 
 
    <option value="EF">Dolor3</option> 
 
</select>

$("select").change(function(){ 
var secondSelect = $(select["name='NameTwo']"); 
if($(this).val() == "Second") { 
    secondSelect.find('option[value="CD"]').addClass('hidden'); 
    } else { 
    secondSelect.find('option[value="CD"]').removeClass('hidden'); 
    } 
}); 

Answer 2

Вы должны запросить на определенном select и затем скройте option в другом select, без this, который будет делать только те option s в select, которые изменились.

$("select[name='NameOne']").change(function() { 
 
    if ($(this).val() == "Second") { 
 
    $("select[name='NameTwo'] option[value='CD']").addClass('hidden'); 
 
    } else { 
 
    $("select[name='NameTwo'] option[value='CD']").removeClass('hidden'); 
 
    } 
 
});

.hidden { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="NameOne"> 
 
    <option value="First">Lorem Ipsum1</option> 
 
    <option value="Second">Lorem Ipsum2</option> 
 
    <option value="Third">Lorem Ipsum3</option> 
 
    <option value="CD">Dolor2</option> 
 
</select> 
 

 
<select name="NameTwo"> 
 
    <option value="AB">Dolor1</option> 
 
    <option value="CD">Dolor2</option> 
 
    <option value="EF">Dolor3</option> 
 
</select>