兩個選擇字段相互依賴

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檢查當前單擊的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');
  }
});

Answer 2

你應該在一個特定的查詢select ，然后隱藏option中的其他選擇，而不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>