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

Это потому, что вам нужно использовать .value свойство HTMLElement.

Пример ниже:

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

И так далее.

Обратите внимание, что value работает только с входами, если вы хотите получить содержание тега, вы должны использовать innerHTML.

EDIT: Я редактировал свой код, теперь он работает хорошо (был var до объявления i в цикл, который может вызвать проблемы), и это ваш обновленный 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; 

Надеется, что это поможет