javascript - 使用 jquery 根据所选值禁用下拉选项

Question

我有一个下拉列表，其中包含 fb-test、fb-testing、tw-test、tw-testing 等值，如下所示。我正在尝试通过以下方式禁用这些选项。

1. 当用户从下拉列表中选择 fb-test 时，fb-testing 应禁用。
2. 当用户选择 tw-testing 或 tw-test 时，应禁用包含“tw”的选项。

这是我正在使用的 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);
});