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的选项并更改类：）

试试这个

＆＃13;

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

＆＃13;

.hidden {
  display: none
}

＆＃13;

<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>

＆＃13;

$("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，而this只会在{{1}中执行option那改变了。

＆＃13;

select

＆＃13;

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

＆＃13;

.hidden {
  display: none
}

＆＃13;

两个选择字段相互依赖

2 个答案: