如何在JSP页面的选项标签上使用onClick()或onSelect()?

如何使用带option标签的onClick()onSelect() ? 下面是我试图实现的代码,但它不能按预期工作。

注意: listCustomer域对象列表在JSP页面中获取。

 <td align="right"> <select name="singleSelect" "> <c:forEach var="Customer" items="${listCustomer}" > <option value="" onClick="javascript:onSelect(this);> <c:out value="${Customer}" /></option> </c:forEach> </select> </td> 

如何修改它以检测选项是否被选中?

onSelect()onClick()事件都不被<option>标签支持。 前者是指select文本(即通过单击+拖动文本字段),所以只能与<text><textarea>标签一起使用。 onClick()事件可以与<select>标签一起使用 – 但是,您可能正在寻找最适合使用onChange()事件而不是onClick()

此外,通过<c:...>标签的外观,您也尝试在纯HTML文档中使用JSP语法。 这只是…不正确。

回应你对这个答案的评论 – 我几乎无法理解。 不过,这听起来像你想要做的就是获得用户select一个标签的时候select的<option>标签的值。 在这种情况下,你想要有这样的东西:

 <html> <head> <script type="text/javascript"> function changeFunc() { var selectBox = document.getElementById("selectBox"); var selectedValue = selectBox.options[selectBox.selectedIndex].value; alert(selectedValue); } </script> </head> <body> <select id="selectBox" onchange="changeFunc();"> <option value="1">Option #1</option> <option value="2">Option #2</option> </select> </body> </html> 

更简化:您可以直接传递属性!

 <html> <head> <script type="text/javascript"> function changeFunc($i) { alert($i); } </script> </head> <body> <select id="selectBox" onchange="changeFunc(value);"> <option value="1">Option #1</option> <option value="2">Option #2</option> </select> </body> </html> 

警报将返回12

上面给出的答案是有效的,但是这是令人困惑的,因为你已经使用了两个名字,而且你有一些不必要的代码。 你正在做一个没有必要的过程。

debugging代码来获取笔和纸,绘制小框来表示内存空间(即variables被存储),然后绘制箭头以指示variables何时进入一个小盒子,以及何时出现,如果它获得被覆盖或是复制等

如果你用下面的代码做这个,你会看到

 var selectBox = document.getElementById("selectBox"); 

放在一个盒子里,待在那里,之后你什么也不做。

 var selectBox = document.getElementById("selectBox"); 

很难debugging,并且当select列表的select标识符为selectBox时会令人困惑。 —-你想操作哪一个selectBox / query / etc是它将会消失的本地var selectBox还是它已经分配给select标签的selectBox id

你的代码一直工作,直到你添加或修改它,然后你可以轻松地跟踪和混合起来

 <html> <head> <script type="text/javascript"> function changeFunc() { var selectBox = document.getElementById("selectBox"); var selectedValue = selectBox.options[selectBox.selectedIndex].value; alert(selectedValue); } </script> </head> <body> <select id="selectBox" onchange="changeFunc();"> <option value="1">Option #1</option> <option value="2">Option #2</option> </select> </body> </html> 

更有效的方法是:

 <html> <head> <script type="text/javascript"> function changeFunc() { var selectedValue = selectBox.options[selectBox.selectedIndex].value; alert(selectedValue); } </script> </head> <body> <select id="selectBox" onchange="changeFunc();"> <option value="1">Option #1</option> <option value="2">Option #2</option> </select> </body> </html> 

并且使用与正在编写的程序和任务相匹配的描述性名称是一个好主意,目前我正在编写一个类似的程序来使用您的代码接受和处理邮编,并使用描述性名称对其进行修改,目标是使计算机语言接近自然语言尽可能。

 <script type="text/javascript"> function Mapit(){ var actualPostcode=getPostcodes.options[getPostcodes.selectedIndex].value; alert(actualPostcode); // alert is for debugging only next we go on to process and do something // in this developing program it will placing markers on a map } </script> <select id="getPostcodes" onchange="Mapit();"> <option>London North Inner</option> <option>N1</option> <option>London North Outer</option> <option>N2</option> <option>N3</option> <option>N4</option> // a lot more options follow // with text in options to divide into areas and nothing will happen // if visitor clicks on the text function Mapit() will ignore // all clicks on the divider text inserted into option boxes </select> 

其他选项,类似的例子,但与select,认为你有两个select,第一个名字是“ea_pub_dest”,第二个名字是“ea_pub_dest_2”,好吧,现在采取事件点击第一个和显示第二。

 <script> function test() { value = document.getElementById("ea_pub_dest").value; if ( valor == "value_1" ) document.getElementById("ea_pub_dest_nivel").style.display = "block"; } </script> 

如果您需要更改另一个字段的值,可以使用以下命令:

 <input type="hidden" id="mainvalue" name="mainvalue" value="0"> <select onChange="document.getElementById('mainvalue').value = this.value;"> <option value="0">option 1</option> <option value="1">option 2</option> </select> 

您可以更改function中的select

 window.onload = function () { var selectBox = document.getElementById("selectBox"); selectBox.addEventListener('change', changeFunc); function changeFunc() { alert(this.value); } } 
 <!DOCTYPE html> <html> <head> <title>Selection</title> </head> <body> <select id="selectBox" onChange="changeFunc();"> <option> select</option> <option value="1">Option #1</option> <option value="2">Option #2</option> </select> </body> </html> 
  <div class="form-group"> <script type="text/javascript"> function activa(){ if(v==0) document.formulario.vr_negativo.disabled = true; else if(v==1) document.formulario.vr_negativo.disabled = true; else if(v==2) document.formulario.vr_negativo.disabled = true; else if(v==3) document.formulario.vr_negativo.disabled = true; else if(v==4) document.formulario.vr_negativo.disabled = true; else if(v==5) document.formulario.vr_negativo.disabled = true; else if(v==6) document.formulario.vr_negativo.disabled = false;} </script> <label>&iquest;Qu&eacute; tipo de veh&iacute;culo est&aacute; buscando?</label> <form name="formulario" id="formulario"> <select name="lista" id="lista" onclick="activa(this.value)"> <option value="0">Vehiculo para la familia</option> <option value="1">Vehiculo para el trabajo</option> <option value="2">Camioneta Familiar</option> <option value="3">Camioneta de Carga</option> <option value="4">Vehiculo servicio Publico</option> <option value="5">Vehiculo servicio Privado</option> <option value="6">Otro</option> </select> <br /> <input type="text" id="form vr_negativo" class="form-control input-xlarge" name="vr_negativo"/> </form> </div> 

使用onChange()更改onClick()。 您可以将选项值发送到JavaScript函数。

 <select id="selector" onChange="doSomething(document.getElementById(this).options[document.getElementById(this).selectedIndex].value);"> <option value="option1"> Option1 </option> <option value="option2"> Option2 </option> <option value="optionN"> OptionN </option> </select> 

在这个例子中,deselect标签被命名为:aula_clase_cb

 <select class="form-control" id="aula_clase_cb" > </select> document.getElementById("aula_clase_cb").onchange = function(e){ id = document.getElementById('aula_clase_cb').value; alert("id: "+id); };