How to use onClick() or onSelect() on option tag in a JSP page?

user_269246 0
Viewed 514511

How to use onClick() or onSelect() with option tag? Below is my code in which I tried to implement that, but it is not working as expected.

Note: where listCustomer domain object list getting in JSP page.

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

javascript
13 Answers
 <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>
user_88333730 
<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>```
user_133277760

example dom onchange usage:

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

In my case:

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

focus clears value, so select any value is a change and fires myFunc(this) and blur defocus for reselect

<html>
 <head>
  <script type="text/javascript">
    function myFunc(el) {
       //Show option value
       console.log(el.value);
    }
  </script>
 </head>
 <body>
   <select id="selectBox" onchange="myFunc(this);this.blur();" onfocus="this.selectedIndex = -1;">
     <option value="1">Option #1</option>
     <option value="2">Option #2</option>
   </select>
 </body>
</html>
user_179677230
Related