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。我使用谷歌开发人员来检查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来容纳select元素，然后只清除附加到onchange事件的div和createElement（select）来修复它。

动态填充的select元素将获取第一个选项的值，但不显示它的文本

2 个答案: