drop down list values not showing
Question
This is a very weird issue I'm facing on my webpage. I currently have a drop down list populated with data from a database using perl and javascript but the drop down list is not displaying the values I'm receiving from the database.
The code I currently have is as follows:
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
The HTML source for the output when I'm inspecting the dropdown list element shows:
<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>
2 answers
solution1
0 2014-06-18 19:04:15
Have you tried moving the script out of the select tag? The DTD (HTML 4) states that select tags have the following structure:
<!ELEMENT SELECT - - (OPTGROUP|OPTION)+ -- option selector -->
Which basically means you can not omit the opening or closing <select> tag and a <select> tag can only contain <optgroup> or <option> tags , nothing else (no <script> )
solution2
0 2014-06-18 20:56:07
In the section:
<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)); <--This line of code was missing!
el.text = opt
el.value = opt
select.appendChild(el);
}
</script>
Thanks CannibalGorilla for the suggestions...Appreciate it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.