循环 java 脚本中的 createElement 未完全执行

Question

我正在为我的电子商务原型网站编写代码。我需要在其中一个页面中创建一个动态下拉列表，它将在其中从数据库接收下拉值（如此处的颜色），然后我必须使用它创建下拉列表。到目前为止，我已经为此编写了以下代码。

//Json object retrieved from database
var tmp = {"category_id":4,"product_available_quantity":20,"product_color":["Red","Blue","Yellow"],"product_condition":"new","product_description":"Branded Metal Body 4 Star","product_discount":0,"product_id":1,"product_img_url":"http://localhost:5224/ebaytester/images/s-l1600.jpg","product_name":"Motorola Cover","product_price":250,"product_shipping":"free","product_sold_quantity":10,"sub_category_id":7};

//dropdown code for color
    var col_div = document.createElement('div');
    col_div.className = "dropdown";
    var col_btn = document.createElement('button');
    var col_span = document.createElement("span");
    col_span.className = "caret";
    col_btn.className = "btn dropdown-toggle";
    col_btn.setAttribute("type","button");
    col_btn.setAttribute("data-toggle","dropdown");
    text_node = document.createTextNode("Select");
    col_btn.appendChild(text_node);
    col_btn.appendChild(col_span);
    col_div.appendChild(col_btn);
    var ulst = document.createElement('UL');
    ulst.className = "dropdown-menu";
    var color = tmp['product_color'];
    document.write(tmp['product_color'].length);
    for(var i=0;i<tmp['product_color'].length;i++) 
        {

        var list = createElement('li');
        var anc = createElement('a');
        text_node = createTextNode(tmp['product_color'][i]);
        anc.setAttribute('href','#');
        anc.appendChild(text_node);
        list.appendChild(anc);
        ulst.appendChild(list);
        document.write(tmp['product_color'][i]);
        }
    col_div.appendChild(ulst);


    document.getElementById("second").appendChild(col_div);

跟踪后发现是for循环的问题。一旦执行第一个 createElement 方法，它就会突然从循环中退出。我已经多次交叉检查所有语法，但一切似乎都很好。我是第一次使用 DOM（文档对象模型），所以请原谅我的错误，如果我做错了什么请告诉我。谢谢

Answer 1

As soon as it executes first createElement method it came out from loop abruptly.

除非您有自己的自定义 createElement 方法，否则您的浏览器可能会抛出一个错误（检查您的 dev-console），表明 createElement 方法是 undefined。

替换为document.createElement

或创建您自己的 createElement 方法

function createElement( name )
{
    return document.createElement( name );
}

Answer 2

你的可能是这样的。如果你想。您的创建元素方法有问题。您可以按照这种方法附加您的 class 名称等

 var tmp = { "category_id": 4, "product_available_quantity": 20, "product_color": ["Red", "Blue", "Yellow"], "product_condition": "new", "product_description": "Branded Metal Body 4 Star", "product_discount": 0, "product_id": 1, "product_img_url": "http://localhost:5224/ebaytester/images/s-l1600.jpg", "product_name": "Motorola Cover", "product_price": 250, "product_shipping": "free", "product_sold_quantity": 10, "sub_category_id": 7 };
   window.onload = function () {
       //dropdown code for color
       var div = document.querySelector("#container"),
        frag = document.createDocumentFragment(),
         select = document.createElement("select");
       var options = tmp.product_color;
       select.options.add(new Option("--Select--", "-1", true, true));
       for (var i = 1; i < options.length;i++)
           select.options.add(new Option(options[i], options[i]));
       frag.appendChild(select);
       div.appendChild(frag);
   }

<div id="container">

</div>

循环 java 脚本中的 createElement 未完全执行

Loop over createElement in java script not executing completely

javascript

twitter-bootstrap

dom

createelement