添加選擇選項，如果未找到並將其選爲+ jquery

Question

我想更新表中的所有selectboxes與另一個選擇框中的值。例如，如果外部選擇框的值爲格林威治媒體，並且用戶單擊該按鈕，則表格中的所有選擇框都應該選擇格林威治媒體。如果表格內的選擇框中沒有Greenwhich媒體，則應添加新選項並進行選擇。

<select class="acc" id="accList" style="width:148px"> 
    <option value="000000000000000001">Greenwich Media</option> 
    <option value="000000000000000002">Greenwich Media1</option> 
</select> 
<input id="assignAccounts" class="btn assignAccounts" type="submit" value="Assign this account to All Rows"> 
<table> 
    <tr> 
     <td> 
      <select class="accSelectandlookup" id="someList0" style="width:148px"> 
       <option value="000000000000000001">Greenwich Media</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <select class="accSelectandlookup" id="someList1" style="width:148px"> 
       <option value="000000000000000002">Greenwich Media1</option> 
      </select> 
     </td> 
    </tr> 
</table> 

$('.assignAccounts').click(function() { 
    $('.accSelectandlookup').each(function (i, obj) { 
     // How do i assign add new option if it does not exist and keep it selected, 
     // if exists then keep that selected 
    } 
}); 

Answer 1

試試這個：你可以在閱讀accList所選值和選項對象，然後通過遍歷所有accSelectandlookup您可以檢查是否選項可用。如果不可用，則添加選項並設置值。

$('.assignAccounts').click(function() { 
    var selectedVal = $('#accList').val(); 
    var selectedOption = $('#accList option[value="'+selectedVal+'"]'); 

    $('.accSelectandlookup').each(function() { 
     if($(this).find('option[value="'+selectedVal+'"]').length <= 0) 
     { 
      $(this).append($(selectedOption).clone()); 
     } 
     $(this).val(selectedVal); 
    } 
}); 

Answer 2

下面的解決方案使用格林威治媒體選項value="000000000000000001"來查找相關選項。

$('.assignAccounts').click(function() { 
 

 
    //check if GreenwichMedia is selected 
 
    var greenwichMediaSelected = ($('#accList').val() === "000000000000000001") ? true : false; 
 

 
    if (greenwichMediaSelected) { 
 
     
 
     $('.accSelectandlookup').each(function (i, obj) { 
 
      var hasGreenwichMedia = $(this).find('[value="000000000000000001"]').length; 
 
      if (!hasGreenwichMedia) { 
 
       $(this).append('<option value="000000000000000001">Greenwich Media</option>'); 
 
      }     
 
     }); 
 
     
 
     //set GreenwichMedia option selected 
 
     $('.accSelectandlookup').val("000000000000000001"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="acc" id="accList" style="width:148px"> 
 
    <option value="000000000000000001">Greenwich Media</option> 
 
    <option value="000000000000000002">Greenwich Media1</option> 
 
</select> 
 
<input id="assignAccounts" class="btn assignAccounts" type="submit" value="Assign this account to All Rows"> 
 
<table> 
 
    <tr> 
 
     <td> 
 
      <select class="accSelectandlookup" id="someList0" style="width:148px"> 
 
       <option value="000000000000000001">Greenwich Media</option> 
 
      </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <select class="accSelectandlookup" id="someList1" style="width:148px"> 
 
       <option value="000000000000000002">Greenwich Media1</option> 
 
      </select> 
 
     </td> 
 
    </tr> 
 
     <tr> 
 
     <td> 
 
      <select class="accSelectandlookup" id="someList2" style="width:148px"> 
 
       <option value="0000000000000000010">BBC Media</option> 
 
       <option value="000000000000000001">Greenwich Media</option> 
 
      </select> 
 
     </td> 
 
    </tr> 
 
</table>