0

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

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;
}

演示：http: //jsfiddle.net/XB63m/

4

2 回答 2

11

这是因为您需要使用.value.HTMLElement

下面的例子：

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

等等。

请注意，它value仅适用于输入，如果您想获取标签的内容，您应该使用innerHTML.

编辑：我编辑了你的代码，现在它运行良好（在 for 循环中有一个可能导致问题的var声明），这是你更新的JSFiddlei

于 2013-05-21T18:12:19.157 回答
0

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-21T18:24:11.180 回答