从用户输入创建下拉列表

时间:2015-07-08 21:25:34

标签: javascript

让我以这种方式简化问题。文档中有2个表。第一个表需要用户输入。最大长度为8个字符。 第二张表是只读的。它包含3个选项的选择。我们想这样做:     用户输入(第1表)cell1 =(第2表)select元素中的Option1     用户输入(第1表)cell2 =(第2表)select元素中的Option2     用户输入(第1表)cell3 =(第2表)select元素中的Option3 但是我无法做到这一点。我的错误在哪里?

<!DOCTYPE html>
<html>
<head>
<title>Thermo Analysis</title>
<style type="text/css">
body {font-family: Arial, Verdana, Helvetica,Sans-serif; margin-left: 50px; 
max-width: 600px;}
th {font-size: 14px; border: 1px; border-style: solid; border-colapse:   
colapse; border-spacing: 0px;}
td {font-size: 14px; border: 1px; border-style: solid; margin: 0px; 
border-colapse: colapse; border-spacing: 0px;}
input:focus {background-color: rgb(255,255,150);}
</style>
</head>
<body>
<table id="imp">
<tbody>
<tr>
<th>Grade</th>
</tr>
<tr>
<td><input type="text" maxlength="8" onkeyup="implist((this));" /></td>
</tr>
<tr>
<td><input type="text" maxlength="8" onkeyup="implist((this));" /></td>
 </tr>
 <tr>
<td><input type="text" maxlength="8" onkeyup="implist((this));" /></td>
 </tr>
</tbody>
</table>
<br><br>
<table id="impData">
<tbody>
<tr>
<th>System</th>
<th>Thermo-Category</th>
</tr>
<tr>
<td>Thermo-Kinetics</td>
<td>
<select>
  <option input type="text"></option>
  <option input type="text"></option>
  <option input type="text"></option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
<script>
function implist() {
var table = document.getElementById("imp");
var valOne = table.rows[1].cells[0].getElementsByTagName("input")[0].value;
var valTwo= table.rows[2].cells[0].getElementsByTagName("input")[0].value;
var valThree = table.rows[3].cells[0].getElementsByTagName("input")
[0].value;

var optionOne = valOne.slice(0, 3);
var optionTwo = "";     var optionThree = "";
var optionTwo = valTwo.slice(0, 3);
if (optionTwo === optionOne) {
    optionTwo = optionTwo + "1";
   }
var optionThree = valThree.slice(0, 3);
if (optionThree !== "" && optionThree === optionOne) {
    optionThree = optionThree + "2";
} else if (optionThree !== "" && optionThree === optionTwo) {
    optionThree = optionThree + "1";
}

var tble = document.getElementById("impData");
tble.rows[1].cells[1].selects[0].["option"][0].["input"][0].value =   
optionOne;
tble.rows[1].cells[1].selects[0].["option"][1].["input"][0].value =   
optionTwo;
tble.rows[1].cells[1].selects[0].["option"][2].["input"][0].value =  
optionThree;
}
</script>
</body>
</html>

0 个答案:

没有答案