由JavaScript創建的元素未由CSS文件格式化

Question

我正在使用嵌入式js腳本制作一個select元素，如下所示。 我確實看到頁面上有一個select元素，但下拉列表為空白。 默認選擇也不顯示。 我認為CSS無法正常工作的原因是尺寸太小了。 我不是從js進行靜態選擇的，它要大得多。 有什么建議么？

* UDPATE *

我附加了select元素，但現在有兩個。 一種可以選擇，不受CSS的影響，另一種可以空白，可以通過CSS表格正確設置格式。 是什么賦予了？

<script>
             function processCSV(file,parentNode)
             {
                var frag = document.createDocumentFragment()
                , lines = file.split('\n'), option;                 
                var intial_option = document.createElement("option");

                intial_option.setAttribute("value","");
                intial_option.setAttribute("disabled","disabled");
                intial_option.setAttribute("selected","selected");
                intial_option.innerHTML = "Please select a Plant";
                frag.appendChild(intial_option)

                for (var i = 0, len = lines.length; i < len; i++){
                    option = document.createElement("option");
                    option.setAttribute("value", lines[i]);
                    option.innerHTML = lines[i];                        
                    frag.appendChild(option);
                    }

                parentNode.appendChild(frag);
                                            menuholder.appendChild(parentNode);
             }

             var plant_select = document.createElement("select");  
             var datafile = '';
             var xmlhttp = new XMLHttpRequest();

             plant_select.setAttribute("class", "selectbox");   
             plant_select.setAttribute("id", "plant_select");



             xmlhttp.open("GET","http://localhost:8080/res/plants.csv",true);
             xmlhttp.send();
             xmlhttp.onreadystatechange = function()
             {
                if(xmlhttp.status==200 && xmlhttp.readyState==4)
                {
                    processCSV(xmlhttp.responseText, plant_select);
                }
             }
        </script>

對應的CSS文件部分如下所示

body
 {
    padding: 0;
     margin: 0;
background-color:#d0e4fe;
font-size: 2em;
      font-family: monospace;
      font-weight: bold;
  }

和

.menu_container
{
   position: relative;
    margin: 0 auto;
 }
.menu_element
{ 
float: right;
width: 33%;
}

Answer 1

我相信您需要在dom中插入plant_select。

因此，在執行processCSV之前，請執行以下操作

var body_elem=document.getElementsByTagName('body')[0];
body_elem.appendChild(plant_select);

根據您要菜單的確切位置來更改第一行（要附加到哪個元素）。 有關創建和插入文檔元素的信息，請參見https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild ，另請參見insertBefore 。

實際上，我也看不到您將選項放在文檔中的什么位置。

這也可能有所幫助，因為您特別在IE中-而不是plant_select.setAttribute（“ class”，“ selectbox”）; plant_select.setAttribute（“ id”，“ plant_select”）;

嘗試

     plant_select.className="selectbox";   
     plant_select.id="plant_select";

尤其是IE，在選擇不正確地將屬性映射到屬性時遇到了問題。 這樣設置id和class比setAttribute更可靠。