JavaScript HTML对象HTMLSelectElement

我想创建一个小的HTML表单，我的用户需要从复选框和下拉列表中选择一些选项。预期的结果是随着用户更改选择而动态生成的文本。这个想法确实有效，但我不断从下拉框中获取“[object HTMLSelectElement]”而不是所选选项的值。如果你们其中一位资深JavaScript程序员可以给我你的意见，我将不胜感激！我花了很多时间仔细检查所有内容，并且我非常确定我的代码在语法上是正确的，但是如果没有意识到，我可能完全错误。我是JavaScript新手，所以我仍处于学习阶段。JavaScript HTML对象HTMLSelectElement

HTML代码：

<form name="input" action="" method="get"> 
<input type="checkbox" name="stCode" id="ai1" onChange="generateSTcode()"> 
Analog Input B1 
<select name="sensorType" id="sensorType1" onChange="generateSTcode()"> 
<option value="2">0-1 Vdc</option> 
<option value="3">0-10 Vdc</option> 
<option value="4">4-20mA</option> 
<option value="5">Off/On</option> 
<option value="6">0-5 Vdc</option> 
</select> 
<select name="sensor" id="sensor1" onChange="generateSTcode()"> 
<option value="oatp_ai">Outside air temperature</option> 
<option value="satp_ai">Supply air temperature</option> 
<option value="ratp_ai">Return air temperature</option> 
<option value="mxtp_ai">Mixed air temperature</option> 
</select><br><br> 
<input type="checkbox" name="stCode" id="ai2" onChange="generateSTcode()"> 
Analog Input B2 
<select name="sensorType" id="sensorType2" onChange="generateSTcode()"> 
<option value="2">0-1 Vdc</option> 
<option value="3">0-10 Vdc</option> 
<option value="4">4-20mA</option> 
<option value="5">Off/On</option> 
<option value="6">0-5 Vdc</option> 
</select> 
<select name="sensor" id="sensor2" onChange="generateSTcode()"> 
<option value="oatp_ai">Outside air temperature</option> 
<option value="satp_ai">Supply air temperature</option> 
<option value="ratp_ai">Return air temperature</option> 
<option value="mxtp_ai">Mixed air temperature</option> 
</select><br><br> 
<input type="checkbox" name="stCode" id="ai3" onChange="generateSTcode()"> 
Analog Input B3 
<select name="sensorType" id="sensorType3" onChange="generateSTcode()"> 
<option value="2">0-1 Vdc</option> 
<option value="3">0-10 Vdc</option> 
<option value="4">4-20mA</option> 
<option value="5">Off/On</option> 
<option value="6">0-5 Vdc</option> 
</select> 
<select name="sensor" id="sensor3" onChange="generateSTcode()"> 
<option value="oatp_ai">Outside air temperature</option> 
<option value="satp_ai">Supply air temperature</option> 
<option value="ratp_ai">Return air temperature</option> 
<option value="mxtp_ai">Mixed air temperature</option> 
</select><br><br> 
</form>  
<div id="generatedCode" class="generatedCode"></div>

JavaScript代码：

function generateSTcode(){ 
var stCodegenerated = "";  
var analogInputCh = new Array(3); 
analogInputCh[0] = document.getElementById('ai1'); 
analogInputCh[1] = document.getElementById('ai2'); 
analogInputCh[2] = document.getElementById('ai3'); 
var sensorType = new Array(3); 
sensorType[0] = document.getElementById('sensorType1'); 
sensorType[1] = document.getElementById('sensorType2'); 
sensorType[2] = document.getElementById('sensorType3'); 
var sensor = new Array(3); 
sensor[0] = document.getElementById('sensor1'); 
sensor[1] = document.getElementById('sensor2'); 
sensor[2] = document.getElementById('sensor3'); 
for(i = 0; i < analogInputCh.length; i++){ 
if(analogInputCh[i].checked){ 
var iTemp = i + 1; 
stCodegenerated += "Ain_Conf(" + iTemp + ", " + sensorType[i] + ", AI_0" + iTemp + "); " 
+ sensor[i] + " := AI_0" + iTemp + ";" + "<br><br>"; 
} 
} 
document.getElementById("generatedCode").innerHTML = stCodegenerated; 
}

DEMO：http://jsfiddle.net/XB63m/

来源

2013-05-21 thienwgu

如果您需要元素的值，请使用'.value'获取值 – Ian

这是因为你需要使用的HTMLElement.value财产。下面

实施例：

var myElement = document.getElementById('myElement'), 
    myElementValue = myElement.value;

等。

请注意，value只适用于输入，如果你想获得你应该使用的标签的内容innerHTML。

编辑：我编辑你的代码，现在它工作得很好（有一个var之前的声明i for循环可能导致问题），这是你更新JSFiddle

来源

2013-05-21 18:12:19

sensorType和sensor是数组select元素。 select元素的当前选定值存储在其value中。在for循环内的代码更改为以下：

stCodegenerated += "Ain_Conf(" + iTemp + ", " + sensorType[i].value + ", AI_0" + iTemp + "); " 
     + sensor[i].value + " := AI_0" + iTemp + ";" + "<br><br>";

然后每个用户改变元件的状态的时候，你会得到这样的事情：

Ain_Conf(1, 2, AI_01); oatp_ai := AI_01;

希望这将有助于

来源

2013-05-21 18:24:11 Mikhail

JavaScript HTML对象HTMLSelectElement

回答

相关问题