JavaScript HTML 对象 HTMLSelectElement

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16676679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:38:39  来源:igfitidea点击:

JavaScript HTML object HTMLSelectElement

javascripthtmlobjectinnerhtml

提问by thienwgu

I am trying to create a little HTML form where my users need to select some options from checkboxes and dropdown lists. The intended outcome is a text that is generated dynamically as the users change their choices. The idea does work but I keep getting “[object HTMLSelectElement]” instead of the value of the selected choice from the dropdown box. If one of you veteran JavaScript programmers could give me your opinion I'd greatly appreciate it! I spent quite some time double checking everything and I'm pretty sure my code is correct syntactically but I could be completely wrong without realizing it. I'm new at JavaScript so I'm still in a learning phase.

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

HTML Code:

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 Code:

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/

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

回答by Niccolò Campolungo

It's because you need to use .valueproperty of HTMLElement.

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

Example below:

下面的例子:

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

And so on.

等等。

Notice that valueworks only with inputs, if you want to get the content of a tag you should use innerHTML.

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

EDIT: I edited your code, now it works well(there was a varbefore declaring iin the for loop that could cause problems) and this is your updated JSFiddle

编辑:我编辑了您的代码,现在它运行良好(在 for 循环中var声明之前有一个i可能会导致问题的代码),这是您更新的JSFiddle

回答by Mikhail

sensorTypeand sensorare arrays of selectelements. The currently selected value of a selectelement is stored in its value. Change the code inside the forloop to the following:

sensorTypesensorselect元素数组。select元素的当前选定值存储在其value. 将for循环内的代码更改为以下内容:

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

Then each time a user changes a state of an element, you will get something like this:

然后每次用户更改元素的状态时,您将得到如下内容:

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

Hope this will help

希望这会有所帮助