两个相互依赖的选择字段

Two select fields dependent on each other

本文关键字：依赖 选择 字段 两个      更新时间：2023-09-26

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

更困难的是，我不能在这里添加任何类或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');
  }
});

您应该查询特定的select，然后将option隐藏在另一个选择中，没有this，这只会在select中更改那些option。

$("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>

相关文章：