Javascript 如何在 JSP 页面中的选项标签上使用 onClick() 或 onSelect()？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3487263/
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
How to use onClick() or onSelect() on option tag in a JSP page?
提问by Manu
How to use onClick()or onSelect()with optiontag? Below is my code in which I tried to implement that, but it is not working as expected.
如何使用onClick()或onSelect()带option标签？下面是我尝试实现它的代码，但它没有按预期工作。
Note: where listCustomerdomain object list getting in JSP page.
注意：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>
How do I modify it to detect that an option is selected?
如何修改它以检测是否选择了一个选项？
回答by Stephen
Neither the onSelect()nor onClick()events are supported by the <option>tag. The former refers to selecting text (i.e. by clicking + dragging across a text field) so can only be used with the <text>and <textarea>tags. The onClick()event can be used with <select>tags - however, you probably are looking for functionality where it would be best to use the onChange()event, not onClick().
标签既不支持onSelect()也不onClick()支持事件<option>。前者是指选择文本（即通过在文本字段上单击+拖动），因此只能与<text>和<textarea>标签一起使用。该onClick()事件可以与<select>标签一起使用- 但是，您可能正在寻找最好使用该onChange()事件的功能，而不是onClick().
Furthermore, by the look of your <c:...>tags, you are also trying to use JSPsyntax in a plain HTML document. That's just... incorrect.
此外，从<c:...>标签的外观来看，您还试图在纯 HTML 文档中使用JSP语法。那只是……不正确。
In response to your comment to this answer - I can barely understand it. However, it sounds like what you want to do is get the value of the <option>tag that the user has just selected whenever they select one. In that case, you want to have something like:
回应你对这个答案的评论 - 我几乎无法理解。但是，听起来您想要做的是<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>
回答by Hannes Schneidermayer
Even more simplified: You can pass the valueattribute directly!
更简化：您可以直接传递value属性！
<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>
The alert will either return 1or 2.
警报将返回1或2。
回答by john Ames
The answer you gave above works but it is confusing because you have used two names twice and you have an unnecessary line of code. you are doing a process that is not necessary.
您在上面给出的答案有效，但令人困惑，因为您使用了两个名称两次，并且有一行不必要的代码。你正在做一个不必要的过程。
it's a good idea when debugging code to get pen and paper and draw little boxes to represent memory spaces (i.e variables being stored) and then to draw arrows to indicate when a variable goes into a little box and when it comes out, if it gets overwritten or is a copy made etc.
在调试代码时，获取笔和纸并绘制小盒子来表示内存空间（即存储的变量），然后绘制箭头以指示变量何时进入小盒子以及何时出现，这是一个好主意覆盖或复制等。
if you do this with the code below you will see that
如果您使用下面的代码执行此操作，您将看到
var selectBox = document.getElementById("selectBox");
gets put in a box and stays there you don't do anything with it afterwards.
被放在一个盒子里并留在那里，之后你不会对它做任何事情。
and
和
var selectBox = document.getElementById("selectBox");
is hard to debug and is confusing when you have a select id of selectBox for the options list . ---- which selectBox do you want to manipulate / query / etc is it the local var selectBox that will disappear or is it the selectBox id you have assigned to the select tag
当您的选项列表具有 selectBox 的选择 ID 时，很难调试并且令人困惑。---- 您要操作/查询/等哪个selectBox是将消失的本地var selectBox还是您分配给select标签的selectBox id
your code works until you add to it or modify it then you can easily loose track and get all mixed up
您的代码可以正常工作，直到您添加或修改它，然后您就可以轻松地失去跟踪并将所有内容混淆
<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>
a leaner way that works also is:
一种更精简的工作方式也是：
<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>
and it's a good idea to use descriptive names that match the program and task you are working on am currently writing a similar program to accept and process postcodes using your code and modifying it with descriptive names the object is to make computer language as close to natural language as possible.
使用与您正在处理的程序和任务相匹配的描述性名称是个好主意，我目前正在编写一个类似的程序来使用您的代码接受和处理邮政编码，并使用描述性名称对其进行修改 目的是使计算机语言接近自然语言尽可能。
<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>
回答by Luis Antonio Rangel Morales
<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>¿Qué tipo de vehículo está 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>
回答by Richard Moises Leon
in this example de select tag is named as: aula_clase_cb
在这个例子中 de select 标签被命名为：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);
};
回答by Fadi
You can change selection in the function
您可以在功能中更改选择
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>回答by Jorge
Other option, for similar example but with anidated selects, think that you have two select, the name of the first is "ea_pub_dest" and the name of the second is "ea_pub_dest_2", ok, now take the event click of the first and display the second.
其他选项，对于类似的例子但带有anidated selects，认为你有两个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>
回答by user2361682
Change onClick() from with onChange() in the . You can send the option value to a javascript function.
使用 onChange() 在 . 您可以将选项值发送到 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>
回答by guest
If you need to change the value of another field, you can use this:
如果你需要改变另一个字段的值，你可以使用这个：
<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>
回答by ceph3us
example dom onchange usage:
dom onchange 用法示例：
<select name="app_id" onchange="onAppSelection(this);">
<option name="1" value="1">space.ecoins.beta.v3</option>
<option name="2" value="2">fun.rotator.beta.v1</option>
<option name="3" value="3">fun.impactor.beta.v1</option>
<option name="4" value="4">fun.colorotator.beta.v1</option>
<option name="5" value="5">fun.rotator.v1</option>
<option name="6" value="6">fun.impactor.v1</option>
<option name="7" value="7">fun.colorotator.v1</option>
<option name="8" value="8">fun.deluxetor.v1</option>
<option name="9" value="9">fun.winterotator.v1</option>
<option name="10" value="10">fun.eastertor.v1</option>
<option name="11" value="11">info.locatizator.v3</option>
<option name="12" value="12">market.apks.ecoins.v2</option>
<option name="13" value="13">fun.ecoins.v1b</option>
<option name="14" value="14">place.sin.v2b</option>
<option name="15" value="15">cool.poczta.v1b</option>
<option name="16" value="16" id="app_id" selected="">systems.ecoins.launch.v1b</option>
<option name="17" value="17">fun.eastertor.v2</option>
<option name="18" value="18">space.ecoins.v4b</option>
<option name="19" value="19">services.devcode.v1b</option>
<option name="20" value="20">space.bonoloto.v1b</option>
<option name="21" value="21">software.devcode.vpnfree.uk.v1</option>
<option name="22" value="22">software.devcode.smsfree.v1b</option>
<option name="23" value="23">services.devcode.smsfree.v1b</option>
<option name="24" value="24">services.devcode.smsfree.v1</option>
<option name="25" value="25">software.devcode.smsfree.v1</option>
<option name="26" value="26">software.devcode.vpnfree.v1b</option>
<option name="27" value="27">software.devcode.vpnfree.v1</option>
<option name="28" value="28">software.devcode.locatizator.v1</option>
<option name="29" value="29">software.devcode.netinfo.v1b</option>
<option name="-1" value="-1">none</option>
</select>
<script type="text/javascript">
function onAppSelection(selectBox) {
// clear selection
for(var i=0;i<=selectBox.length;i++) {
var selectedNode = selectBox.options[i];
if(selectedNode!=null) {
selectedNode.removeAttribute("id");
selectedNode.removeAttribute("selected");
}
}
// assign id and selected
var selectedNode = selectBox.options[selectBox.selectedIndex];
if(selectedNode!=null) {
selectedNode.setAttribute("id","app_id");
selectedNode.setAttribute("selected","");
}
}
</script>
