Fatal编程技术网
  • javascript/
  • Javascript 如何在JSP页面中对选项标记使用onClick（）或onSelect（）？

Javascript 如何在JSP页面中对选项标记使用onClick（）或onSelect（）？

javascript

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>&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>



<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>```