jqueryはプログラムによってマルチセレクトを再選択しません

Question

jquery 2.1.1を使用してティックボックスでマルチセレクトのすべてのオプションを選択しようとしています。

これは最初のティックボックスの選択と選択解除には問題ありませんが、その後のティックボックスの選択ではマルチセレクションオプションが強調表示されず、コンソールへの変更イベントの書き込みには値のnullが表示されます。

以下は、問題を説明するためにファイルにカットアンドペーストすることができる作業コピーです。自然にこの問題のスタックオーバーフローを検索しましたが、リストされていません。

なぜティックボックスを再選択すると、 'selected = "selected"が追加されますが、オプションが強調表示されず、コンソールの値が「null」になりますか？

何か助けていただきありがとうございます。

jQuery(document).ready(function($) { 
 

 
    jQuery(function() { 
 
    jQuery('#bundle-option-5').change(function() { 
 
     console.log(jQuery(this).val()); 
 
    }); 
 
    }); 
 
}); 
 

 
function updateBundleItems(bundleOptionId) { 
 

 
    if (jQuery('input#bundle_tick_' + bundleOptionId).is(':checked')) { 
 
    //jQuery('.bundle_item_'+bundleOptionId).addAttr("selected"); 
 
    jQuery('.bundle_item_' + bundleOptionId).attr('selected', true); 
 
    } else { 
 
    //  jQuery('.bundle_item_'+bundleOptionId).removeAttr("selected"); 
 
    jQuery('.bundle_item_' + bundleOptionId).attr('selected', false); 
 
    } 
 

 
    jQuery('#bundle-option-' + bundleOptionId).trigger('change'); 
 
}

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<div class="input-box"> 
 
    <input class="checkbox" onclick="updateBundleItems(5)" id="bundle_tick_5" type="checkbox"> 
 
    <select multiple="multiple" size="5" id="bundle-option-5"> 
 
    <option value="">None</option> 
 
    <option class="bundle_item_5" value="11">first one</option> 
 
    <option class="bundle_item_5" value="12">second one</option> 
 
    <option class="bundle_item_5" value="13">third one</option> 
 
    </select> 
 
</div>

Answer 1

あなたはattr 1の代わりにprop機能を使用する必要があります。偉大な作業だと

jQuery(document).ready(function($) { 
 
    jQuery(function() { 
 
    jQuery('#bundle-option-5').change(function() { 
 
     console.log(jQuery(this).val()); 
 
    }); 
 
    }); 
 
}); 
 

 
function updateBundleItems(bundleOptionId) { 
 

 
    if (jQuery('input#bundle_tick_'+bundleOptionId).is(':checked')) { 
 
    //jQuery('.bundle_item_'+bundleOptionId).addAttr("selected"); 
 
    jQuery('.bundle_item_'+bundleOptionId).prop('selected', true); 
 
    } 
 
    else { 
 
    //  jQuery('.bundle_item_'+bundleOptionId).removeAttr("selected"); 
 
    jQuery('.bundle_item_'+bundleOptionId).prop('selected', false); 
 
    } 
 

 
    jQuery('#bundle-option-'+bundleOptionId).trigger('change'); 
 
}

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<div class="input-box"> 
 
    <input class="checkbox" onclick="updateBundleItems(5)" id="bundle_tick_5" type="checkbox"> 
 
    <select multiple="multiple" size="5" id="bundle-option-5"> 
 
    <option value="">None</option> 
 
    <option class="bundle_item_5" value="11">first one</option> 
 
    <option class="bundle_item_5" value="12">second one</option> 
 
    <option class="bundle_item_5" value="13">third one</option> 
 
    </select> 
 
</div>