動態填充的select元素將采用第一個選項的值，但不顯示其文本

Question

   window.onload = function()
{
    document.addEventListener('deviceready', init, false);
    init();
}

function init()
{
   populateItem();
}

function populateItem()
{
    clearItem();
    var itemSel = document.getElementById("itemSelect");
    var x = 0;
    for(i=0; i<items.length; i++)
        {

            if(document.getElementById('itemType').value == items[i].Device)


                    {
                        itemSel.innerHTML +="<option value='" + items[i].Model + "'>"+items[i].Make + " " + items[i].Model+"</option>";
                    }
        }
    reload();

}

function clearItem()
{
    for(var ex=document.getElementById('itemSelect').length; ex >= 0; ex--)
        {
            document.getElementById('itemSelect').remove(ex);

        }

}

function reload()
{
    var container = document.getElementById("itemSelect");
    var content = container.innerHTML;
    container.innerHTML= content;
}
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />

    <!--<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" /> -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/InventoryItems.js"></script>

    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Inventory</title>
</head>

<body>
    <div id="content">

    <select id="itemType" onchange="populateItem()">
        <option value='Computer'>  Computer</option>
        <option value='Monitor'>  Monitor</option>
        <option value='Phone'>  Phone</option>
        <option value='Printer'>  Printer</option>
    </select>
    <select id="itemSelect"></select>

    </div>


</body>

</html>

每當我運行程序時，它都不會設置itemSelect來顯示所選選項的innerHTML。 它采用的值與我使用Google Developer來檢查itemSelect.value一樣，但不會顯示實際選擇的文本。 上面的代碼是我的js文件和我的html文件。 它正在從另一個js文件中提取項目值，但是我確定它正確地提取了值，因為我可以看到選項並通過更改itemSelected.value來選擇它們。 不管默認選擇是什么，它都不會在select元素上僅生成可視文本，直到在select元素中選擇了其他選項為止。

Answer 1

您需要再次設置select元素的selectedIndex屬性，因為您弄亂了它的innerHtml。

只需將其設置為：

itemSel.selectedIndex = "1";

該值應該是您要選擇的選項元素的索引。

這是selectedIndex的信息： http : //www.w3schools.com/jsref/prop_select_selectedindex.asp

Answer 2

通過創建一個div來容納選擇元素，然后清除div和附加到onchange事件的createElement（select）來修復此問題。

動態填充的select元素將采用第一個選項的值，但不顯示其文本

問題描述

2 個解決方案

解決方案1
0 2016-10-31 21:17:18

解決方案2
0 2016-11-01 11:39:05

動態填充的select元素將采用第一個選項的值，但不顯示其文本

問題描述

2 個解決方案

解決方案1 0 2016-10-31 21:17:18

解決方案2 0 2016-11-01 11:39:05

解決方案1
0 2016-10-31 21:17:18

解決方案2
0 2016-11-01 11:39:05