Javascript 如何在JSP页面中对选项标记使用onClick()或onSelect()?
如何将Javascript 如何在JSP页面中对选项标记使用onClick()或onSelect()?,javascript,Javascript,如何将onClick()或onSelect()与选项标记一起使用?下面是我的代码,我试图在其中实现它,但它没有按预期工作 注意:其中listCustomer域对象列表进入JSP页面 <td align="right"> <select name="singleSelect" "> <c:forEach var="Customer" items="${listCustomer}" > <option value="" onCli
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>
如何修改它以检测是否选择了选项?标记既不支持nor事件,也不支持nor事件。前者指的是选择文本(即通过单击+拖动文本字段),因此只能与
和
标记一起使用。onClick()
事件可以与
标记一起使用-但是,您可能正在寻找最好使用事件的功能,而不是onClick()
此外,从
标记的外观来看,您还试图在普通HTML文档中使用语法。那只是。。。不对
对于你对这个答案的评论,我几乎无法理解。但是,听起来您想要做的是获取用户刚刚选择的
标记的值。在这种情况下,您希望有如下内容:
<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>
函数changeFunc(){
var selectBox=document.getElementById(“selectBox”);
var selectedValue=selectBox.options[selectBox.selectedIndex].value;
警报(selectedValue);
}
选项1
选项2
您上面给出的答案很有效,但令人困惑,因为您使用了两个名称,并且有一行不必要的代码。您正在执行一个不必要的过程
在调试代码时,最好使用笔和纸,并绘制小方框来表示内存空间(即存储的变量),然后绘制箭头来指示变量何时进入小方框,何时出来,是否被覆盖或复制等
如果使用下面的代码执行此操作,您将看到
var selectBox = document.getElementById("selectBox");
被放进一个盒子里,呆在那里,之后你什么都不做
及
很难调试,并且在选项列表的选择id为selectBox时会造成混乱。---您要操作/查询/etc哪个selectBox是将消失的本地变量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>
函数changeFunc(){
var selectBox=document.getElementById(“selectBox”);
var selectedValue=selectBox.options[selectBox.selectedIndex].value;
警报(selectedValue);
}
选项1
选项2
一种更精简的工作方式是:
<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>
函数changeFunc(){
var selectedValue=selectBox.options[selectBox.selectedIndex].value;
警报(selectedValue);
}
选项1
选项2
使用与您正在执行的程序和任务相匹配的描述性名称是一个好主意。我目前正在编写一个类似的程序,使用您的代码接受和处理邮政编码,并使用描述性名称对其进行修改。目的是使计算机语言尽可能接近自然语言
<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>
函数Mapit(){
var actualPostcode=getPostcodes.options[getPostcodes.selectedIndex].value;
警报(实际邮政编码);
//警报只用于调试,下一步我们将继续处理并执行某些操作
//在这个开发程序中,它将在地图上放置标记
}
伦敦北内大街
N1
伦敦北外大街
氮气
N3
N4
//接下来还有很多选择
//在选项中将文本划分为多个区域时,不会发生任何事情
//如果访问者单击文本函数,则Mapit()将被忽略
//在插入选项框的分隔符文本上的所有单击
更加简化:您可以直接传递值属性
<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>
函数changeFunc($i){
警报(一美元);
}
选项1
选项2
警报将返回
1
或2
其他选项,例如类似的示例,但使用日期选择,认为您有两个选择,第一个名称为“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>
功能测试()
{
value=document.getElementById(“ea_pub_dest”).value;
如果(价值=“价值1”)
document.getElementById(“ea_pub_dest_nivel”).style.display=“block”;
}
在中使用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>
选择1
选择2
选择权
如果需要更改另一个字段的值,可以使用以下方法:
<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>
选择1
选择2
在本例中,取消选择标记的名称为:aula\u clase\u 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);
};
document.getElementById(“aula\u clase\u cb”).onchange=函数(e){
id=document.getElementById('aula\u clase\u cb')。值;
警报(“id:+id”);
};
您可以更改函数中的选择
window.onload=函数(){
var selectBox=document.getElementById(“selectBox”);
selectBox.addEventListener('change',changeFunc);
函数changeFunc(){
警报(该值);
}
}
挑选
选择
选项1
选项2
函数activa(){
如果(v==0)
document.formulario.vr_negative.disabled=true;
else如果(v==1)
document.formulario.vr_negative.disabled=true;
else如果(v==2)
document.formulario.vr_negative.disabled=true;
如果(v==3),则为else
document.formulario.vr_negative.disabled=true;
else如果(v==4)
document.formulario.vr_negative.disabled=tru
<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);
};
<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>
<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>
<html>
<head>
<script type="text/javascript">
function changeFunction(val) {
//Show option value
console.log(val.value);
}
</script>
</head>
<body>
<select id="selectBox" onchange="changeFunction(this)">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>
<html>
<head>
<title>Cars</title>
</head>
<body >
<h1>Cars</h1>
<p>Name </p>
<select id="selectBox" onchange="myFunction(value);">
<option value="volvo" >Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
</select>
<p id="result"> Price : </p>
<script>
function myFunction($value)
{
if($value=="volvo")
{document.getElementById("result").innerHTML = "30L";}
else if($value=="saab")
{document.getElementById("result").innerHTML = "40L";}
else if($value=="mercedes")
{document.getElementById("result").innerHTML = "50L";}
}
</script>
</body>
</html>```