JavaScript HTML對象HTMLSelectElement

Question

我想創建一個小的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; 
} 

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

Answer 1

這是因爲你需要使用的HTMLElement.value財產。下面

實施例：

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

等。

請注意，value只適用於輸入，如果你想獲得你應該使用的標籤的內容innerHTML。

編輯： 我編輯你的代碼，現在它工作得很好（有一個var之前的聲明i for循環可能導致問題），這是你更新JSFiddle

Answer 2

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; 

希望這將有助於