Question

I have 2 drop-downs. The first drop-down is the design color. The second one is what the design is going to be printed on. Sometimes we have red designs, but they can’t be printed on red wraps as the colors would blend together. I am trying to split the first option to give me the color that it is and if it matches an option from below to disable it. When another option is chosen the disabled option will refresh.

My idea was to create a str and use it to see if it is in the option name. It doesn’t seem to work so I think I am missing something small. If I replace "str" with "Red" for example it disables red, but it won’t work on the fly which is what I need it to do. Any help would be greatly appreciated.

This is the piece where I am struggling:
$(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

I think it should be (not tested)

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