如何在使用Javascript選擇的html select元素中創建所有值

Question

在HTML中，有兩個選擇標簽，第一個包含所有世界國家，第二個僅包含用戶選擇的國家。

<form action="/fixsongs.fix">
     <table>
                            <tr>
                                <td colspan="2">
                                    <label title="Potential Releases from these countries get their score boosted">
                                        Preferred Release Countries
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <select id="preferred_countries_all" size="15" style="width:200px" multiple="multiple">
                                        <option value=" AF">Afghanistan</option><option value="AX">Åland Islands</option><option value="AL">Albania</option><option value="DZ">Algeria</option><option value="AS">American Samoa</option><option value="AD">Andorra</option><option value="AO">Angola</option><option value="AI">Anguilla</option><option value="AQ">Antarctica</option><option value="AG">Antigua and Barbuda</option><option value="AR">Argentina</option><option value="AM">Armenia</option><option value="AW">Aruba</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="AZ">Azerbaijan</option><option value="BS">Bahamas</option><option value="BH">Bahrain</option>...<option value="ZW">Zimbabwe</option>
                                    </select>
                                </td>
                                <td>
                                    <button style="width:100px" type="button" id="preferred_countries_add" onclick="add_preferred_countries();">
                                        Add
                                    </button>
                                    <br>
                                    <button style="width:100px" type="button" id="preferred_countries_remove" onclick="remove_preferred_countries();">
                                        Remove
                                    </button>
                                </td>
                                <td>
                                    <select id="preferred_countries_selected" name="preferred_countries_selected" size="15" style="width:200px" multiple="multiple">
                                        <option value="GB">United Kingdom</option>
                                    </select>
                                </td>
                            </tr>
                        </table>
<input type="submit" value="Start">

用戶通過突出顯示來選擇它們，然后單擊按鈕，以調用以下Javascript函數。

function add_preferred_countries() {
     allCountries      = document.getElementById('preferred_countries_all');
     selectedCountries = document.getElementById('preferred_countries_selected');
     var length=$('#preferred_countries_all option:selected').length;
     if(length==0) { 
        return false;
     }

     $('#preferred_countries_all option:selected').each(function(){
        $('#preferred_countries_selected').append($(this));
     });
     //selectedCountries.value = "";


      for (var i = 0; i < selectedCountries.options.length; i++) { 
             selectedCountries.options[i].selected = selected; 
    } 
}

'這些位工作正常，但是我意識到，當我最終提交包含此選項和其他選項的表單時，它將發送選擇列表中實際選擇的項目。 因此，在沒有更好的解決方案的情況下，我想在用戶添加新國家/地區時自動選擇preferred_countries_selected中的所有值，以便在用戶提交表單時將首選國家/地區發送到服務器

我以為這樣可以用，但是沒有效果

for (var i = 0; i < selectedCountries.options.length; i++) { 
                 selectedCountries.options[i].selected = selected; 

我知道現有函數中包含一些JQuery，但是我更喜歡純JavaScript解決方案，因為我不太了解JQuery語法。

理想情況下，我希望他們按提交時執行此操作，但這是另一個問題。

Answer 1

你有一些HTML驗證問題與你的table ，你真的不應該使用內聯CSS或HTML事件屬性（即onclick因為） 他們有許多有害的副作用 。

請參閱下面的代碼片段中的內聯注釋，請注意，您需要checked CSS偽類，而不是selected ：

 // Get references to the two lists var allCountries = document.getElementById('preferred_countries_all'); var selectedCountries = document.getElementById('preferred_countries_selected'); function add_preferred_countries(operation) { if(operation === "add"){ // Get the selected countries from list one into an array var allPreferredSelected = Array.prototype.slice.call(allCountries.querySelectorAll('option:checked')); // Loop over the array allPreferredSelected.forEach(function(selOption){ selectedCountries.appendChild(selOption); // Add each to the second list }); // Loop through the second list and select each option Array.prototype.slice.call(selectedCountries.querySelectorAll("option")).forEach(function(opt){ opt.selected = "selected"; }); console.log("Item added"); } else { // Do remove operation here // Loop over the selected countries in the second list Array.prototype.slice.call(selectedCountries.querySelectorAll("option:checked")).forEach(function(opt){ selectedCountries.removeChild(opt); // Remove country }); console.log("Item removed"); } } // Get the add and remove buttons into an array and loop over the array Array.prototype.slice.call(document.querySelectorAll("button[id^='preferred_countries']")).forEach(function(btn){ // Set up a click event handler for the button btn.addEventListener("click", function(){ add_preferred_countries(this.dataset.action); // Call the add/remove function with the right arg }); }); 

 /* Do your styling separate from the HTML */ button[id^='preferred_countries'] { width:100px; } select { width:200px; height:20em; } 

 <form action="/fixsongs.fix"> <table> <tr> <td colspan="2"> <span title="Potential Releases from these countries get their score boosted"> Preferred Release Countries </span> </td> </tr> <tr> <td> <select id="preferred_countries_all" multiple="multiple"> <option value=" AF">Afghanistan</option> <option value="AX">Åland Islands</option> <option value="AL">Albania</option> <option value="DZ">Algeria</option> <option value="AS">American Samoa</option> <option value="AD">Andorra</option> <option value="AO">Angola</option> <option value="AI">Anguilla</option> <option value="AQ">Antarctica</option> <option value="AG">Antigua and Barbuda</option> <option value="AR">Argentina</option><option value="AM">Armenia</option> <option value="AW">Aruba</option> <option value="AU">Australia</option> <option value="AT">Austria</option> <option value="AZ">Azerbaijan</option> <option value="BS">Bahamas</option><option value="BH">Bahrain</option> ... <option value="ZW">Zimbabwe</option> </select> </td> <td> <button type="button" id="preferred_countries_add" data-action="add">Add</button> <br> <button type="button" id="preferred_countries_remove" data-action="remove">Remove</button> </td> <td> <select id="preferred_countries_selected" name="preferred_countries_selected" multiple="multiple"> <option value="GB">United Kingdom</option> </select> </td> </tr> </table> <input type="submit" value="Start"> </form>