頁面加載后如何設置動態生成的 Select2 下拉列表的樣式？

Question

我正在使用 Select2 從http://ivaynberg.github.io/select2/下拉樣式。

我在頁面上有幾個下拉菜單，它們使用以下樣式正確設置：

<script>
$(document).ready(function() { 
    $("#dropdown1").select2();
    $("#dropdown2").select2();
});
</script>

現在，我在頁面上有另一個選項，它允許用戶為其他選項添加任意數量的下拉菜單，方法如下：

      <img src="images/add.png" title="Add Row" border="0" onclick="addRowToCountryPrice('',''); return false;">
      <input type="hidden" name="TotalLinesCountry" id="TotalLinesCountry">
      <script> 
        var arr = new Array();
        var ind=0;
        function showCountryDrop(name1,sel, param){
        var dval="";
        dval = "<select name=\"" + name1 + "\" id=\"" + name1 + "\" class=\"countriesclass\">";
        dval += "<option value=\"\">Select Country</option>\r\n";
            selVal = (sel==0001) ? "selected=\"selected\"" : " " ; 
            dval += "<option value=\"0001\" " + selVal + ">United Kingdom</option>";

            selVal = (sel==0002) ? "selected=\"selected\"" : " " ; 
            dval += "<option value=\"0002\" " + selVal + ">United States</option>";

            selVal = (sel==0003) ? "selected=\"selected\"" : " " ; 
            dval += "<option value=\"0003\" " + selVal + ">Albania</option>";

            selVal = (sel==0004) ? "selected=\"selected\"" : " " ; 
            dval += "<option value=\"0004\" " + selVal + ">Algeria</option>";

        dval +="</select>"; 
        return dval;
        }
        function addRowToCountryPrice(country,price) { 
            var tbl = document.getElementById("tblCountryCurrency");
            var lastRow = tbl.rows.length;
            var iteration = lastRow;
            var row = tbl.insertRow(lastRow);
            var cellVal = "";
            var cellLeft;
            var i=0;
            arr[ind] = (iteration+1);   
            cellLeft = row.insertCell(i++);
            cellLeft.innerHTML = showCountryDrop("countryDrop_" + ind,country);
            cellLeft = row.insertCell(i++);
            var price = (price!=0) ? price : "0.00";
            cellLeft.innerHTML = "<input type=\"text\" name=\"countryPrice_" + ind + "\" id=\"countryPrice_" + iteration + "\" value = \"" + price + "\" size=\"8\">";
            cellLeft = row.insertCell(i++);
            cellLeft.innerHTML = "<img src=\"images/delete.png\" title=\"Delete Row\" border=\"0\" onclick=\" removeRowFromTable(" + ind + "); return false;\">";
            document.getElementById("TotalLinesCountry").value = (parseInt(ind)+1);
            ind++;
        }
        function removeRowFromTable(src)
        {
          var tbl = document.getElementById("tblCountryCurrency");
          var lastRow = tbl.rows.length;
          if (arr[src]!="") tbl.deleteRow((arr[src]-1));
          arr[src]="";
          var counter = 1;
           for( i=0; i<arr.length; i++) {
               if (arr[i]!="") {
                  arr[i]= counter;
                  counter++;
               }    
            }
            return false;
        }
        </script>

雖然它正確生成下拉菜單，但它們不會通過“countriesclass”類設置樣式，即使我執行以下操作：

$(".countriesclass").select2();

我也試過

dval +="</select>"; 
$(".countriesclass").select2();
return dval;

這似乎部分以一種奇怪的方式起作用。 當我創建第一個下拉列表時，它不會被設置樣式。 當我創建另一個第二個下拉列表時，第一個會被設置樣式，但第二個不會。 然后它不允許我創建更多的並顯示錯誤。

我有什么想法可以讓這個工作嗎？

更新：jsFiddle http://jsfiddle.net/y6af098z/2/

Answer 1

當文檔准備好時，您對$('.countriesclass')調用就會關閉。 但是選擇尚未添加到文檔中，然后。 所以沒有找到元素。

在用戶單擊加號並將選擇添加到 dom 后，您應該查找添加的選擇。

$('#plus').on('click', function () {
    $tr = addRowToCountryPrice('Algeria', 0);
    $('.countriesclass', $tr).select2();
});

第二個參數$tr告訴 jquery 只查看最近添加的表行，以便您只選擇新添加的select ，它是新添加的tr 。 不是其他行中的選擇。

就像@dreamweiver 已經指出的那樣，您應該在創建 dom 元素時更好地使用 jquery。 這就是 jquery 擅長的。 我已經更新了 jsfiddle 以展示如何以 jquery 方式創建選擇和表行。

演示

Answer 2

不是使用 getelementbyId 而是使用 getelementbyClass 並為每個下拉列表指定一個類，您只能有一個 getelementbyid。

希望這可以幫助。 如果你願意，我可以把你需要的代碼發給你嗎？

Answer 3

調用select2時無法找到下拉列表框，因為它們是動態添加的，因此這些對於 jQuery 類選擇器$(".countriesclass").select2();不可見$(".countriesclass").select2(); .

這種類型的行為可以通過從文檔元素中引用選擇器來克服，而不是像上面那樣直接引用元素。 所以新的選擇器應該是這樣的

$(document).find("select.countriesclass").select2();

此外，我在您的代碼中做了一些調整。

現場演示：

http://jsfiddle.net/dreamweiver/y6af098z/8/

注意：還有一件事，在使用 jQuery lib 時，請確保充分利用它，不要使用原始 JS 代碼，而是使用 jQuery 等效語法，這樣會簡單易用。