使用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("-"); 
 
//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>

Answer 2

更新

input[value *=tw]它將匹配列出所有以tw開頭的值

$('#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); 
 
});

<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>

Answer 3

使用值開始選擇^：

$('#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); 
});