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

一旦执行第一个createElement方法，它就会从中出来突然循环。

除非您拥有自己的自定义createElement方法，否则您的浏览器可能会抛出错误（请检查您的开发控制台），表明createElement方法为undefined。

将其替换为document.createElement

或创建您自己的createElement方法

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

Answer 2

你可能是这样的。如果你想。你的创建元素方法的问题。您可以通过附加您的班级名称等跟随此方法。

 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而不是完全执行

2 个答案: