使用jquery

Question

我有一个下拉列表包含fb-test，fb-testing，tw-test，tw-testing等值，如下所示。我试图以下列方式禁用这些选项。

1. 当用户从下拉列表中选择fb-test时，fb-testing应该禁用。
2. 当用户选择tw测试或tw测试时，该选项包含＆＃39; tw＆＃39;应禁用。

这是我正在使用的HTML标记：

<select id="wpri-profile">
    <option value="0">--Select--</option>
    <option value="fb-test">fb-test</option>
    <option value="fb-testing">fb-testing</option>
    <option value="tw-test">tw-test</option>
    <option value="tw-testing">tw-testing</option>                  
</select>

这是我正在尝试的代码：

$('#wpri-profile').on('change',function(){
    $(this).find('option').prop('disabled',false);  
    var val = $(this).val();
    var prof = val.split("-");
    alert(prof[0]);
    $(this).find('option[value="'+prof[0]+'"]').prop('disabled',true);
});

Answer 1

使用以选择器^开头的值：

$('#wpri-profile').on('change',function(){
   $(this).find('option').prop('disabled',false);  
   var val = $(this).val();
   var prof = val.split("-");

   // starting with selector shall do it
   $(this).find('option[value^="'+prof[0]+'"]').prop('disabled',true);
});

Answer 2

<强>更新

input[value *=tw]它会匹配以tw

开头的所有值

＆＃13;

＆＃13;

$('#wpri-profile').on('change',function(){
$(this).find('option').prop('disabled',false);  
var val = $(this).val();
var prof = val.split("-");
alert(prof[0]);
  
$(this).find('option[value *='+val+']').prop('disabled',true);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="wpri-profile">
                <option value="0">--Select--</option>
                <option value="fb-test">fb-test</option>
                <option value="fb-testing">fb-testing</option>
                <option value="tw-test">tw-test</option>
                <option value="tw-testing">tw-testing</option>                  
            </select>

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试这个并按预期工作，

$('#wpri-profile').on('change',function(){
$(this).find('option').prop('disabled',false);  
var val = $(this).val();
var prof = val.split("-");
//alert(prof[0]);
  
$(this).find('option[value*='+prof[0]+']').prop('disabled',true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="wpri-profile">
                <option value="0">--Select--</option>
                <option value="fb-test">fb-test</option>
                <option value="fb-testing">fb-testing</option>
                <option value="tw-test">tw-test</option>
                <option value="tw-testing">tw-testing</option>                  
            </select>