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>

虽然它正确生成了下拉菜单，但它们没有通过类＃34; countriesclass＆＃34;设置样式，即使我这样做了：

$(".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方式创建select和table行。

DEMO

Answer 2

使用getelementbyClass而不是使用getelementbyClass并为每个下拉列表提供一个类，您只能有一个getelementbyid。

希望这会有所帮助。如果你愿意我可以发给你所需要的代码吗？

Answer 3

调用时select2无法找到下拉列表框，因为它们是动态添加的，因此jquery类选择器$(".countriesclass").select2();不可见。

这种行为可以通过引用文档元素中的选择器来克服，而不是像上面那样直接引用元素。所以新选择器应该像这样

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

此外，我在您的代码中进行了少量调整。

现场演示：

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

注意：还有一件事，当使用jquery lib时，请确保你充分利用它，不要使用原始js代码而是使用jquery等效语法，这将简单易用。 / em>的

快乐编码：）

如何在页面加载后动态生成Select2下拉列表的样式？

3 个答案: