オプションは別のオプションに基づいて属性を変更します

Question

2つのドロップダウンがあります。最初のドロップダウンはデザインカラーです。もう1つは、デザインが印刷されることです。時には赤いデザインがありますが、色が混ざり合うように赤いラップには印刷できません。私は最初のオプションを分割して、私に色を与え、それが下のオプションと合っていればそれを無効にしようとしています。別のオプションを選択すると、無効なオプションが更新されます。

私の考えは、strを作成してそれがオプション名に入っているかどうかを確認することでした。それは動作しないように見えるので、私は何か小さいものを欠いていると思う。たとえば、 "str"を "Red"に置き換えた場合、それは赤を無効にしますが、それが必要な処理では動作しません。どんな助けでも大歓迎です。

これは私が苦労している部分です： $（designColor）.children（ 'option：contains（str）'）。attr（ 'disabled'、 'disabled'）;迅速かつ完璧だった私はそれが（テストしていない）であるべきだと思う

<p> 
<select onchange="change_option('SELECT___LX-03675___185',this.options[this.selectedIndex].value)" name="SELECT___LX-03675___185"> 
<option selected="" value="0">Choose Water Bottle WRAP Color</option> 
<option value="1343">Black Water Bottle</option> 
<option value="1052">Green Water Bottle</option> 
<option value="1874">Purple Water Bottle</option> 
<option value="1051">Red Water Bottle</option> 
<option value="1053">Royal Water Bottle</option> 
<option value="1813">Pink Water Bottle</option> 
</select><br> 
<select onchange="change_option('SELECT___LX-03675___529',this.options[this.selectedIndex].value)" name="SELECT___LX-03675___529"> 
<option selected="" value="0">Choose Water Bottle DESIGN Color</option> 
<option value="2519">Pink Design Water Bottle</option> 
<option value="2520">Red Design Water Bottle</option> 
<option value="2521" disabled="disabled">White Design Water Bottle</option> 
<option value="2522">Black Design Water Bottle</option> 
<option value="2523">Blue Design Water Bottle</option> 
</select> 
</p> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

var wrapColor = $('select[name=SELECT___LX-03675___185]'); 
var designColor = $('select[name=SELECT___LX-03675___529]'); 

$(wrapColor).change(function() { 
     var str = ""; 
     $(wrapColor).children("option:selected").each(function() { 
      str += $(this).text().split(' ')[0] + " "; 
      }); 


$(designColor).children('option').removeAttr('disabled'); 
$(designColor).children('option:contains(str)').attr('disabled','disabled'); 

    }) 
    .trigger('change'); 
}); 
</script> 

Answer 1

$(designColor).children('option:contains('+str+')').prop('disabled',true);