javascript - 页面加载后如何设置动态生成的 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，它是新添加的select的子项。添加了tr。不是其他行中的选择。

就像 @dreamweiver 已经指出的那样，在创建 dom 元素时应该更好地使用 jquery。这就是 jquery 所擅长的。我已经更新了 jsfiddle 以展示如何以 jquery 方式创建选择和表行。

DEMO