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

Question

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    lt td align  right  gt      lt select name  singleSelect    gt         lt c forEach var  Customer  items    listCustomer    gt        lt option value    onClick  javascript onSelect this   gt   lt c out value    Customer     gt  lt  option gt                   lt  c forEach gt             lt  select gt                    lt  td gt       How do I modify it to detect that an option is selected

User · Answer

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    lt script gt   function test         value   document getElementById  ea pub dest   value      if   valor     value 1            document getElementById  ea pub dest nivel   style display    block      lt  script gt

User · Answer

lt html gt   lt head gt   lt title gt Cars lt  title gt   lt  head gt   lt body  gt    lt h1 gt Cars lt  h1 gt       lt p gt Name  lt  p gt           lt select id  quot selectBox quot  onchange  quot myFunction value   quot  gt               lt option value  quot volvo quot   gt Volvo lt  option gt               lt option value  quot saab quot    gt Saab lt  option gt               lt option value  quot mercedes quot  gt Mercedes lt  option gt           lt  select gt           lt p id  quot result quot  gt  Price    lt  p gt   lt script gt  function myFunction  value               if  value   quot volvo quot        document getElementById  quot result quot   innerHTML    quot 30L quot        else if  value   quot saab quot        document getElementById  quot result quot   innerHTML    quot 40L quot         else if  value   quot mercedes quot        document getElementById  quot result quot   innerHTML    quot 50L quot       lt  script gt   lt  body gt   lt  html gt

User · Answer

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  your code works until you add to it or modify it then you can easily loose track and get all mixed up   lt html gt   lt head gt   lt script type  text javascript  gt   function changeFunc     var selectBox   document getElementById  selectBox    var selectedValue   selectBox options selectBox selectedIndex  value  alert selectedValue       lt  script gt   lt  head gt    lt body gt   lt select id  selectBox  onchange  changeFunc     gt   lt option value  1  gt Option  1 lt  option gt   lt option value  2  gt Option  2 lt  option gt   lt  select gt   lt  body gt   lt  html gt    a leaner way that works also is    lt html gt   lt head gt   lt script type  text javascript  gt   function changeFunc      var selectedValue   selectBox options selectBox selectedIndex  value  alert selectedValue       lt  script gt   lt  head gt   lt body gt   lt select id  selectBox  onchange  changeFunc     gt   lt option value  1  gt Option  1 lt  option gt   lt option value  2  gt Option  2 lt  option gt   lt  select gt   lt  body gt   lt  html gt    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    lt script type  text javascript  gt   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      lt  script gt    lt select id  getPostcodes  onchange  Mapit     gt    lt option gt London North Inner lt  option gt    lt option gt N1 lt  option gt    lt option gt London North Outer lt  option gt    lt option gt N2 lt  option gt   lt option gt N3 lt  option gt   lt option gt N4 lt  option gt      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   lt  select gt

User · Answer

You can change selection in the function   x000D   x000D  window onload   function      x000D    var selectBox   document getElementById  selectBox    x000D    selectBox addEventListener  change   changeFunc   x000D    function changeFunc     x000D      alert this value   x000D      x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D     lt head gt  x000D       lt title gt Selection lt  title gt  x000D     lt  head gt  x000D     lt body gt  x000D       lt select id  selectBox  onChange  changeFunc     gt  x000D         lt option gt  select lt  option gt  x000D         lt option value  1  gt Option  1 lt  option gt  x000D         lt option value  2  gt Option  2 lt  option gt  x000D      lt  select gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Neither the onSelect   nor onClick   events are supported by the  lt option gt  tag  The former refers to selecting text  i e  by clicking   dragging across a text field  so can only be used with the  lt text gt  and  lt textarea gt  tags  The onClick   event can be used with  lt select gt  tags - however  you probably are looking for functionality where it would be best to use the onChange   event  not onClick     Furthermore  by the look of your  lt c     gt  tags  you are also trying to use JSP syntax in a plain HTML document  That s just    incorrect   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  lt option gt  tag that the user has just selected whenever they select one  In that case  you want to have something like    lt html gt    lt head gt     lt script type  text javascript  gt      function changeFunc         var selectBox   document getElementById  selectBox        var selectedValue   selectBox options selectBox selectedIndex  value      alert selectedValue            lt  script gt    lt  head gt    lt body gt     lt select id  selectBox  onchange  changeFunc     gt      lt option value  1  gt Option  1 lt  option gt      lt option value  2  gt Option  2 lt  option gt     lt  select gt    lt  body gt   lt  html gt

User · Answer

Change onClick   from  with onChange   in the   You can send the option value to a javascript function    lt select id  selector  onChange  doSomething document getElementById this  options document getElementById this  selectedIndex  value    gt    lt option value  option1  gt  Option1  lt  option gt   lt option value  option2  gt  Option2  lt  option gt   lt option value  optionN  gt  OptionN  lt  option gt   lt  select gt

User · Answer

in this example de select tag is named as  aula clase cb   lt select class  form-control  id  aula clase cb   gt   lt  select gt   document getElementById  aula clase cb   onchange   function e       id   document getElementById  aula clase cb   value      alert  id    id

User · Answer

If you need to change the value of another field  you can use this    lt input type  hidden  id  mainvalue  name  mainvalue  value  0  gt   lt select onChange  document getElementById  mainvalue   value   this value   gt   lt option value  0  gt option 1 lt  option gt   lt option value  1  gt option 2 lt  option gt   lt  select gt

User · Answer

example dom onchange usage    lt select name  app id  onchange  onAppSelection this    gt       lt option name  1  value  1  gt space ecoins beta v3 lt  option gt       lt option name  2  value  2  gt fun rotator beta v1 lt  option gt       lt option name  3  value  3  gt fun impactor beta v1 lt  option gt       lt option name  4  value  4  gt fun colorotator beta v1 lt  option gt       lt option name  5  value  5  gt fun rotator v1 lt  option gt       lt option name  6  value  6  gt fun impactor v1 lt  option gt       lt option name  7  value  7  gt fun colorotator v1 lt  option gt       lt option name  8  value  8  gt fun deluxetor v1 lt  option gt       lt option name  9  value  9  gt fun winterotator v1 lt  option gt       lt option name  10  value  10  gt fun eastertor v1 lt  option gt       lt option name  11  value  11  gt info locatizator v3 lt  option gt       lt option name  12  value  12  gt market apks ecoins v2 lt  option gt       lt option name  13  value  13  gt fun ecoins v1b lt  option gt       lt option name  14  value  14  gt place sin v2b lt  option gt       lt option name  15  value  15  gt cool poczta v1b lt  option gt       lt option name  16  value  16  id  app id  selected    gt systems ecoins launch v1b lt  option gt       lt option name  17  value  17  gt fun eastertor v2 lt  option gt       lt option name  18  value  18  gt space ecoins v4b lt  option gt       lt option name  19  value  19  gt services devcode v1b lt  option gt       lt option name  20  value  20  gt space bonoloto v1b lt  option gt       lt option name  21  value  21  gt software devcode vpnfree uk v1 lt  option gt       lt option name  22  value  22  gt software devcode smsfree v1b lt  option gt       lt option name  23  value  23  gt services devcode smsfree v1b lt  option gt       lt option name  24  value  24  gt services devcode smsfree v1 lt  option gt       lt option name  25  value  25  gt software devcode smsfree v1 lt  option gt       lt option name  26  value  26  gt software devcode vpnfree v1b lt  option gt       lt option name  27  value  27  gt software devcode vpnfree v1 lt  option gt       lt option name  28  value  28  gt software devcode locatizator v1 lt  option gt       lt option name  29  value  29  gt software devcode netinfo v1b lt  option gt       lt option name  -1  value  -1  gt none lt  option gt   lt  select gt     lt script type  text javascript  gt       function onAppSelection selectBox               clear selection         for var i 0 i lt  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                          lt  script gt

User · Answer

lt div class  form-group  gt            lt script type  text javascript  gt                 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                                                               lt  script gt            lt label gt  amp iquest Qu amp eacute  tipo de veh amp iacute culo est amp aacute  buscando  lt  label gt           lt form name  formulario  id  formulario  gt             lt select name  lista  id  lista  onclick  activa this value   gt                  lt option value  0  gt Vehiculo para la familia lt  option gt                  lt option value  1  gt Vehiculo para el trabajo lt  option gt                  lt option value  2  gt Camioneta Familiar lt  option gt                  lt option value  3  gt Camioneta de Carga lt  option gt                  lt option value  4  gt Vehiculo servicio Publico lt  option gt                 lt option value  5  gt Vehiculo servicio Privado lt  option gt                 lt option value  6  gt Otro lt  option gt             lt  select gt              lt br   gt             lt input type  text  id  form vr negativo  class  form-control input-xlarge  name  vr negativo   gt           lt  form gt     lt  div gt

User · Answer

In my case    lt html gt    lt head gt     lt script type  text javascript  gt       function changeFunction val              Show option value        console log val value             lt  script gt    lt  head gt    lt body gt      lt select id  selectBox  onchange  changeFunction this   gt        lt option value  1  gt Option  1 lt  option gt        lt option value  2  gt Option  2 lt  option gt      lt  select gt    lt  body gt   lt  html gt

User · Answer

Even more simplified  You can pass the value attribute directly    lt html gt    lt head gt     lt script type  text javascript  gt      function changeFunc  i        alert  i            lt  script gt    lt  head gt    lt body gt     lt select id  selectBox  onchange  changeFunc value    gt      lt option value  1  gt Option  1 lt  option gt      lt option value  2  gt Option  2 lt  option gt     lt  select gt    lt  body gt   lt  html gt    The alert will either return 1 or 2

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

Examples related to javascript