Question

我用这段代码打了几个小时。无论我做出什么选择，输出总是好像我选择了第一行（set17，gpio17以及第一个组合框中的任何内容）。

我尝试更改双引号的单引号，尝试使用不同的浏览器，并为每一行定义了不同的ajaxFunction，但结果始终相同。

例如，预期结果是警报框，其中包含GPIO24行的值，当其组合框发生更改时。

任何有更新思维的人都可以告诉我，我做错了什么吗？

顺便说一下，有没有办法将$ item和$ action变量传递给“document.getElementById”而无需创建文本框？

提前致谢

<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en">
<body>

<script type="text/javascript">
function ajaxFunction(){
var action = document.getElementById('action');
var item = document.getElementById('item');
var value = document.getElementById('value');
alert("You entered: " + " " + action.value + " " + value.value + " " + item.value )


}
</script>


<center><b>AJAX TEST PAGE</b><br/><br/><table border="1"><tr>

<td>gpio17</td><td> Sensor Wireless #3 <td>
<form name='gpio17'>
<select id='value' onchange='ajaxFunction()'>
<option value= value_option_1> value_option_1</option>
<option value='value-option_1'>Option_1_display</option>
<option value='value-option_2'>Option_2_display</option>
<option value='value-option_3'>Option_3_display</option>
</select><td>
<input type='text' id='action' value='set17' /> <br />
<input type='text' id='item' value='gpio17' /></td></form></td></tr><tr>

<td>gpio23</td><td> Sensor Wireless #2<td>
<form name='gpio23'>
<select id='value' onchange='ajaxFunction()'>
<option value= value_option_2> value_option_2</option>
<option value='value-option_1'>Option_1_display</option>
<option value='value-option_2'>Option_2_display</option>
<option value='value-option_3'>Option_3_display</option>
</select><td>
<input type='text' id='action' value='set23' /> <br />
<input type='text' id='item' value='gpio23' /></td></form></td></tr><tr>

<td>gpio24</td><td> Sensor Wireless #1<td>
<form name='gpio24'>
<select id='value' onchange='ajaxFunction()'>
<option value= value_option_1> value_option_1</option>
<option value='value-option_1'>Option_1_display</option>
<option value='value-option_2'>Option_2_display</option>
<option value='value-option_3'>Option_3_display</option>
</select><td>
<input type='text' id='action' value='set24' /> <br />
<input type='text' id='item' value='gpio24' /></td></form></td></tr><tr>

<td>gpio25</td><td> Sensor Wireless #0
<td><form name='gpio25'>
<select id='value' onchange='ajaxFunction()'>
<option value= value_option_3> value_option_3</option>
<option value='value-option_1'>Option_1_display</option>
<option value='value-option_2'>Option_2_display</option>
<option value='value-option_3'>Option_3_display</option>
</select><td>
<input type='text' id='action' value='set25' /> <br />
<input type='text' id='item' value='gpio25' /></td></form></td></tr>

</table>

</body>
</html>

Answer 1

您的HTML无效：id属性必须是唯一的。如果您使用document.getElementById()的ID不是唯一的，那么您只能获得一个元素（在大多数浏览器中它将是第一个元素）。

您可以将引用传递给触发事件的特定元素，如下所示：

<select id='makethisuniqueordeleteattributecompletelyifnotused'
        onchange='ajaxFunction(this)'>

“有没有办法将$ item和$ action变量传递给”document.getElementById“而无需创建文本框？”

是。因为它们只是字符串值，所以你可以这样做：

<select id='makethisuniqueordeleteattributecompletelyifnotused'
        onchange='ajaxFunction(this,"set17","gpio17")'>

然后您可以更改您的函数以接受这些值，如下所示：

function ajaxFunction(el, action, item){
    // selected value of select element in question:
    var value = el.value;
    alert("You entered: " + " " + value + " " + action + " " + item );
}

演示：http://jsfiddle.net/8ACHe/

Javascript函数似乎总是收到相同的输入

1 个答案: