【问题标题】:How to use onClick() or onSelect() on option tag in a JSP page?如何在 JSP 页面的选项标签上使用 onClick() 或 onSelect()?
【发布时间】:2010-08-15 12:01:53
【问题描述】:

如何将onClick()onSelect()option 标签一起使用?下面是我尝试实现它的代码,但它没有按预期工作。

注意: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>   

如何修改它以检测选择了一个选项?

【问题讨论】:

  • &lt;option&gt; 元素不会在所有浏览器中触发 click 事件,您应该远离依赖它。标记时也要小心,Java != JavaScript,"Java is to JavaScript what Car is to Carpet."
  • @Nick.. 使用上面的代码,我正在创建显示客户姓名的下拉菜单。如果我在下拉菜单中选择任何值,该值应该传递给 java 脚本..请帮我怎么做..
  • @Nick.. 你能看到我为斯蒂芬放弃的下面的 cmets,我期待你的回复

标签: javascript


【解决方案1】:

&lt;option&gt; 标签不支持onSelect()onClick() 事件。前者是指选择文本(即通过单击+拖动文本字段),因此只能与&lt;text&gt;&lt;textarea&gt; 标签一起使用。 onClick() 事件可以与 &lt;select&gt; 标签一起使用 - 但是,您可能正在寻找最好使用 onChange() 事件而不是 onClick() 的功能。

此外,从&lt;c:...&gt; 标记的外观来看,您还尝试在纯HTML 文档中使用JSP 语法。那只是……不正确。

回应您对此答案的评论 - 我几乎无法理解。但是,听起来您想要做的是获取用户在选择一个时刚刚选择的&lt;option&gt; 标签的值。在这种情况下,你想要这样的东西:

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

【讨论】:

  • @Stephen.. 使用上面的代码,我正在创建显示客户姓名的下拉菜单。如果我在下拉菜单中选择任何值,该值应该传递给 java 脚本..请帮我怎么做..
  • @Stephen .. 我有超过 1000 个客户名称 .. 在这种情况下,我该如何创建选项#1,选项#2。而且数据是动态的
  • 在这种情况下,您可能希望在服务器端填充它。你是在服务器端使用 PHP 还是其他语言?
  • @Stephen.. 我的要求是我有下拉列表菜单(显示在 jsp 页面中),其中包含 n 个客户名称。如果我单击该列表中的任何名称,则所选名称应发送到 javascript 函数。请为此提供解决方案..
  • 啊,所以您正在使用 Java Server Pages (JSP)。对不起,但这超出了我的经验范围。我只使用过一次 JSP,那是为了生成一个 XML 文件,而不是正确的 HTML。我建议你在谷歌上搜索一些关于 JSP 的教程。对不起。
【解决方案2】:

更简单:您可以直接传递 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>

警报将返回12

【讨论】:

    【解决方案3】:

    您在上面给出的答案有效,但令人困惑,因为您两次使用了两个名称并且您有不必要的代码行。你正在做一个不必要的过程。

    在调试代码时用笔和纸绘制小框来表示内存空间(即存储的变量)然后绘制箭头来指示变量何时进入小框以及何时出来,这是一个好主意,如果它被覆盖或被复制等。

    如果您使用下面的代码执行此操作,您会看到

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

    被放在一个盒子里,然后你就不会用它做任何事情。

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

    当你有一个 selectBox 的选择 id 作为选项列表时,很难调试并且令人困惑。 ----您要操作/查询/等哪个selectBox是会消失的本地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>
    

    【讨论】:

      【解决方案4】:
       <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>
      

      【讨论】:

        【解决方案5】:

        在这个例子中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);
        };
        

        【讨论】:

          【解决方案6】:

          您可以在函数中更改选择

          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>

          【讨论】:

            【解决方案7】:
            <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>```
            

            【讨论】:

            • 仅代码答案通常可以通过添加对它们的工作方式和原因的解释来改进。已接受答案的十年前的问题仍然可以添加答案,但这些答案应指出他们解决的问题的新方面。
            【解决方案8】:

            其他选项,类似例子但有动画选择,认为你有两个选择,第一个的名称是“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>
            

            【讨论】:

              【解决方案9】:

              在 .您可以将选项值发送到 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>
              

              【讨论】:

                【解决方案10】:

                如果你需要改变另一个字段的值,你可以使用这个:

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

                【讨论】:

                  【解决方案11】:

                  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>
                  

                  【讨论】:

                    【解决方案12】:

                    就我而言:

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

                    【讨论】:

                      猜你喜欢
                      • 1970-01-01
                      • 1970-01-01
                      • 1970-01-01
                      • 2013-09-01
                      • 1970-01-01
                      • 2013-08-23
                      • 1970-01-01
                      • 2016-04-19
                      • 1970-01-01
                      相关资源
                      最近更新 更多