Question

这是我在网页上遇到的一个非常奇怪的问题。我目前有一个下拉列表，其中填充了使用perl和javascript的数据库中的数据，但是下拉列表没有显示我从数据库接收的值。

我目前的代码如下：

my $dataX = ${ConnectToDatabase($main::edsUGCar, $main::databaseEnv)};
$resultSet = $dataX->Execute("select vendor from dex_vendor_info group by vendor");

my @list_of_vendors;
while(!$resultSet->EOF) {
push @list_of_vendors, $resultSet->Fields("vendor")->Value;
    $resultSet->MoveNext;
}

$list_of_vendors_json = encode_json(\@list_of_vendors);

print <<ONE;
<html>
<body>
<h4> Test Vendor Array Javascript </h4>

<p id="demo"</p>
<form id="myForm">
<select id="selectNumber">
<option>Choose a Vendor</option>
<script type="text/javascript" language="JavaScript">
var list_of_vendors = $list_of_vendors_json;
var select = document.getElementById("selectNumber"); 
for(var i = 0; i < list_of_vendors.length; i++) {
    var opt = list_of_vendors[i];
    var el = document.createElement("option");
    el.text = opt;
    el.value = opt;
    select.appendChild(el);
}
</script>
</select>
</form>
</body>
</html>
ONE

当我检查下拉列表元素时输出的HTML源显示：

<SELECT id=selectNumber> <OPTION selected>Choose a Vendor</OPTION> 
<SCRIPT language=JavaScript type=text/javascript>
var list_of_vendors = ["3D Systems","3DSystems","3M"];
var select = document.getElementById("selectNumber"); 
for(var i = 0; i < list_of_vendors.length; i++) {
    var opt = list_of_vendors[i];
    var el = document.createElement("option");
    el.text = opt;
    el.value = opt ;
    select.appendChild(el);
}
</SCRIPT>
 <OPTION value="3D Systems"></OPTION> # Info Missing here after the `>`
 <OPTION value="3DSystems"></OPTION>
 <OPTION value="3M></OPTION>
</SELECT>

Answer 1

您是否尝试过将该脚本移出select标签？ DTD（HTML 4）声明选择标记具有以下结构：

<!ELEMENT SELECT - - (OPTGROUP|OPTION)+ -- option selector -->

这基本上意味着您无法省略开始或结束<select>代码， <select>代码只能包含<optgroup>或<option>代码 ，别的（没有<script>）

Answer 2

在以下部分：

<script type="text/javascript">
    var list_of_vendors = $list_of_vendors_json;
    var select = document.getElementById("selectNumber"); 
    for(var i = 0; i < list_of_vendors.length; i++) {
        var opt = list_of_vendors[i];
        var el = document.createElement("OPTION");

el.appendChild(document.createTextNode(opt));＆lt; - 缺少这行代码！

        el.text = opt
        el.value = opt
        select.appendChild(el);
    }
</script>

感谢CannibalGorilla的建议......感谢它。

下拉列表值未显示

2 个答案: