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

我想做的是创建两个选择字段，并在第一个中选择了某个选项之后，第二个中的一些选项应被隐藏。
除了事实，我几乎就在那儿，我的脚本无法在第一个选择字段中找到某个选项，但是当我在第一个选择字段中放置该选项时，它就起作用了，但只能在第一个选项中起作用，所以它没有用。我需要它根据第一个选择的选项隐藏第二个选择字段中的选项。

更难的是我无法在此处添加任何类或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
}

请帮忙。

最佳答案

由于下面的代码，它不起作用：

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

简而言之，this检查当前单击的select选项。由于单击了第一个选择，因此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');
  }
});

关于javascript - 两个选择字段相互依赖，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39212408/