javascript无法识别我的html元素

时间:2013-12-30 10:44:33

标签: javascript php html

我得到的是一个空白页面,虽然我应该有一个组合框。数组填充得很好 - 我提醒了一些值并且它有效,但组合框没有显示任何内容。 我想要做的是从数组中检索的数据创建一个组合框,但它似乎不起作用。

<script type="text/javascript">
            var array = {"ADDRESS_ID":["3","5"],"ADDRESS_PLACE":["a","b"],"ADDRESS_PARENT":[null,null],"TYPE":["0","1"]};
    var i, theContainer, theSelect, theOptions, numOptions, anOption;
    theContainer = document.createElement('div');
    theContainer.id = array['TYPE'][0];
    theSelect = document.createElement('select');
    theSelect.name = 'name_of_select';
    theSelect.id = 'id_of_select';
    theSelect.onchange = function () {
        alert('You selected option '+this.selectedIndex);
    };

    // Add some <option>s
    numOptions = array.length;
    for (i = 0; i < numOptions; i++) {
        anOption = document.createElement('option');
        anOption.value = array['ADDRESS_ID'][i];
        anOption.innerHTML = array['ADDRESS_ID'][i];
        theSelect.appendChild(anOption);
    }

    // Add the <div> to the DOM, then add the <select> to the <div>
    document.getElementById('container_for_select_container').appendChild(theContainer);
    theContainer.appendChild(theSelect);
    </script>
    <div id="container_for_select_container">

    </div>
    </body>         
</html>

3 个答案:

答案 0 :(得分:1)

问题似乎与您的numOptions有关。不应该是:

numOptions = array['ADDRESS_ID'].length;

而不是

numOptions = array.length;

Here's the working fiddle

答案 1 :(得分:1)

除了一些东西之外,你的代码工作正常。如上所述,Array的长度是错误的。您需要使用array['ADDRESS_ID'].length而不是array.length,并且需要在JavaScript代码之前将div与id“container_for_select_container”放在一起,或者将JavaScript代码放在window.load中功能。否则,您尝试将选择框附加到尚不存在的HTML元素。

<div id="container_for_select_container"></div>

<script type="text/javascript">
    var array = {
        "ADDRESS_ID": ["3", "5"],
            "ADDRESS_PLACE": ["a", "b"],
            "ADDRESS_PARENT": [null, null],
            "TYPE": ["0", "1"]
    };
    var i, theContainer, theSelect, theOptions, numOptions, anOption;
    theContainer = document.createElement('div');
    theContainer.id = array['TYPE'][0];
    theSelect = document.createElement('select');
    theSelect.name = 'name_of_select';
    theSelect.id = 'id_of_select';
    theSelect.onchange = function() {
        alert('You selected option ' + this.selectedIndex);
    };

    // Add some <option>s
    numOptions = array['ADDRESS_ID'].length;
    for (i = 0; i < numOptions; i++) {
        anOption = document.createElement('option');
        anOption.value = array['ADDRESS_ID'][i];
        anOption.innerHTML = array['ADDRESS_ID'][i];
        theSelect.appendChild(anOption);
    }

    // Add the <div> to the DOM, then add the <select> to the <div>
    document.getElementById('container_for_select_container').appendChild(theContainer);
    theContainer.appendChild(theSelect);
</script>

答案 2 :(得分:0)

您需要将numOptions变量更改为:

numOptions = array['ADDRESS_ID'].length;

JSFiddle中的工作示例: http://jsfiddle.net/reBSB/

新守则:

var array = {"ADDRESS_ID":["3","5"],"ADDRESS_PLACE":["a","b"],"ADDRESS_PARENT":[null,null],"TYPE":["0","1"]};
var i, theContainer, theSelect, theOptions, numOptions, anOption;
theContainer = document.createElement('div');
theContainer.id = array['TYPE'][0];
theSelect = document.createElement('select');
theSelect.name = 'name_of_select';
theSelect.id = 'id_of_select';
theSelect.onchange = function () {
    alert('You selected option '+this.selectedIndex);
};

// Add some <option>s
numOptions = array['ADDRESS_ID'].length;
for (i = 0; i < numOptions; i++) {
    anOption = document.createElement('option');
    anOption.value = array['ADDRESS_ID'][i];
    anOption.innerHTML = array['ADDRESS_ID'][i];
    theSelect.appendChild(anOption);
}

// Add the <div> to the DOM, then add the <select> to the <div>
document.getElementById('container_for_select_container').appendChild(theContainer);
theContainer.appendChild(theSelect);