2つの選択フィールドが互いに依存します

Question

私がしようとしているのは、2つの選択フィールドを作成し、最初のオプションを選択した後、2番目のオプションの一部を非表示にする必要があります。 私のスクリプトは最初の選択フィールドから特定のオプションを見つけることができないという事実を除いて、ほとんど存在しますが、最初にこのオプションを指定すると、最初のものだけで動作しますが、無駄です。最初のオプションで選択したオプションに従って、2番目の選択フィールドのオプションを非表示にする必要があります。

実際にここにクラスや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を持つオプションを検索しようとします。あなたは何をしているのですか？シンプルで、この

// 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に問い合わせる必要があります試してみてくださいその中の値のCDでオプションを見つけ、第2の選択を取得し、クラス:)

を変更し、他の選択肢のoptionを非表示にします.は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>