javascript - 两个相互依赖的选择字段

Question

我想做的是创建两个选择字段，在第一个选择了一些选项后，第二个中的一些选项应该被隐藏。 我几乎就在那里，除了事实，我的脚本无法从第一个选择字段中找到某些选项，但是当我将这样的选项放在第一个时它可以工作，但只适用于第一个，所以它没用。我需要它根据第一个选项中选择的选项隐藏第二个选择字段中的选项。

让事情变得更加困难的是我无法在此处添加任何类或 ID 或任何实际内容。

我想我犯了一些错误，包括我告诉脚本应该编辑哪个元素的方式，但我不知道如何用另一种方式编写它。

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