How to pass parameters on onChange of html select

Question

I am a novice at JavaScript and jQuery  I want to show one combobox-A  which is an HTML  lt select gt  with its selected id and contents at the other place on onChange      How can I pass the complete combobox with its select id  and how can I pass other parameters on fire of the onChange event

User · Answer

I found  Piyush s answer helpful  and just to add to it  if you programatically create a select  then there is an important way to get this behavior that may not be obvious   Let s say you have a function and you create a new select   var changeitem   function  sel      console log sel selectedIndex     var newSelect   document createElement  select    newSelect id    newselect     The normal behavior may be to say  newSelect onchange   changeitem    But this does not really allow you to specify that argument passed in  so instead you may do this   newSelect setAttribute  onchange    changeitem this       And you are able to set the parameter   If you do it the first way  then the argument you ll get to your onchange function will be browser dependent   The second way seems to work cross-browser just fine

User · Answer

jQuery solution  How do I get the text value of a selected option  Select elements typically have two values that you want to access  First there s the value to be sent to the server  which is easy         myselect    val         gt  1   The second is the text value of the select  For example  using the following select box    lt select id  myselect  gt     lt option value  1  gt Mr lt  option gt     lt option value  2  gt Mrs lt  option gt     lt option value  3  gt Ms lt  option gt     lt option value  4  gt Dr lt  option gt     lt option value  5  gt Prof lt  option gt   lt  select gt    If you wanted to get the string  Mr  if the first option was selected  instead of just  1   you would do that in the following way          myselect option selected    text         gt   Mr      See also    val   jQuery API Documentation

User · Answer

JavaScript Solution   lt select id  comboA  gt   lt option value    gt Select combo lt  option gt   lt option value  Value1  gt Text1 lt  option gt   lt option value  Value2  gt Text2 lt  option gt   lt option value  Value3  gt Text3 lt  option gt   lt  select gt     lt script gt   document getElementById  comboA   onchange   function        var value   document getElementById  comboA   value       lt  script gt    or   lt script gt   document getElementById  comboA   onchange   function evt       var value   evt target value       lt  script gt    or   lt script gt   document getElementById  comboA   onchange   handleChange    function handleChange evt       var value   evt target value       lt  script gt

User · Answer

Another approach wich can be handy in some situations  is passing the value of the selected  lt option   gt  directly to the function like this    x000D   x000D  function myFunction chosen    x000D    console log chosen   x000D    x000D   lt select onChange  myFunction this options this selectedIndex  value   gt  x000D     lt option value  1  gt Text 1 lt  option gt  x000D     lt option value  2  gt Text 2 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

this code once i write for just explain onChange event of select you can save this code as html and see output it works and easy to understand for you    lt html gt       lt head gt           lt title gt Register lt  title gt       lt  head gt       lt body gt       lt script gt          function show                var option   document getElementById  category   value              if option     Student                                               document getElementById  enroll1   style display  block                                   if option     Parents                                               document getElementById  enroll1   style display  none                                   if option     Guardians                                               document getElementById  enroll1   style display  none                                      lt  script gt               lt form action     method  post  gt                   lt table gt                       lt tr gt                           lt td gt  lt label gt Name  lt  label gt  lt  td gt                           lt td gt  lt input type  text  id  name  size 20 maxlength 20 value    gt  lt  td gt                       lt  tr gt                       lt tr style  display block   id  enroll1  gt                           lt td gt  lt label gt Enrollment No   lt  label gt  lt  td gt                           lt td gt  lt input type  number  id  enroll  style  display block   size 20 maxlength 12 value    gt  lt  td gt                       lt  tr gt                       lt tr gt                           lt td gt  lt label gt Email  lt  label gt  lt  td gt                           lt td gt  lt input type  email  id  emailadd  size 20 maxlength 25 value    gt  lt  td gt                       lt  tr gt                       lt tr gt                           lt td gt  lt label gt Mobile No   lt  label gt  lt  td gt                           lt td gt  lt input type  number  id  mobile  size 20 maxlength 10 value    gt  lt  td gt                       lt  tr gt                       lt tr gt                           lt td gt  lt label gt Address lt  label gt  lt  td gt                           lt td gt  lt textarea rows  2  cols  20  gt  lt  textarea gt  lt  td gt                       lt  tr gt                       lt tr  gt                           lt td gt  lt label gt Category lt  label gt  lt  td gt                           lt td gt  lt select id  category  onchange  show    gt      lt  --onchange show methos is call-- gt                                   lt option value  Student  gt Student lt  option gt                                   lt option value  Parents  gt Parents lt  option gt                                   lt option value  Guardians  gt Guardians lt  option gt                               lt  select gt                           lt  td gt                       lt  tr gt                   lt  table gt  lt br  gt               lt input type  submit  value  Sign Up  gt           lt  form gt       lt  body gt   lt  html gt

User · Answer

This worked for me onchange   setLocation   this  val     Here        Html DropDownList  Demo    new SelectList ViewBag locs   Value    Text     new   Class    ddlStyle   onchange    setLocation   this  val

User · Answer

Just in case someone is looking for a React solution without having to download addition dependancies you could write    lt select onChange  this changed this   gt      lt option value  Apple  gt Apple lt  option gt      lt option value  Android  gt Android lt  option gt                   lt  select gt   changed      return e   gt        console log e target value          Make sure to bind the changed   function in the constructor like   this changed   this changed bind this

User · Answer

For how to do it in jQuery    lt select id  yourid  gt   lt option value  Value 1  gt Text 1 lt  option gt   lt option value  Value 2  gt Text 2 lt  option gt   lt  select gt    lt script src  jquery js  gt  lt  script gt   lt script gt      yourid   change function       alert  The option with value       this  val       and text       this  text       was selected          lt  script gt    You should also know that Javascript and jQuery are not identical  jQuery is valid JavaScript code  but not all JavaScript is jQuery  You should look up the differences and make sure you are using the appropriate one

User · Answer

This is helped for me   For select      select tags   on  change   function         alert    this  find   selected   val            For radio checkbox      radio tags   on  change   function         alert    this  find   checked   val

User · Answer

You can try bellow code     lt select onchange  myfunction   this  val     id  myId  gt       lt  select gt

User · Answer

Simply   x000D   x000D  function retrieve    alert document getElementById  SMS recipient   options document getElementById  SMS recipient   selectedIndex  text     x000D   x000D   x000D    x000D   x000D   lt  script type    text javascript gt     function retrieve other       alert myForm SMS recipient options document getElementById  SMS recipient   selectedIndex  text      function retrieve       alert document getElementById  SMS recipient   options document getElementById  SMS recipient   selectedIndex  text         lt  script gt  x000D   lt HTML gt   lt BODY gt     lt p gt RETRIEVING TEXT IN OPTION OF SELECT  lt  p gt     lt form name  myForm  action    gt       lt P gt Select         lt select id  SMS recipient  gt           lt options value   15121234567  gt Andrew lt  option gt             lt options value   15121234568  gt Klaus lt  option gt         lt  select gt       lt  p gt       lt p gt         lt  -- Note  Despite the script engine complaining about it the code works -- gt         lt input type  button  onclick  retrieve    value  Try it    gt         lt input type  button  onclick  retrieve other    value  Try Form    gt       lt  p gt     lt  form gt   lt  HTML gt   lt  BODY gt  x000D   x000D   x000D   Output  Klaus or Andrew depending on what the selectedIndex is  If you are after the value just replace  text with value  However if it is just the value you are after  not the text in the option  then use document getElementById  SMS recipient   value

User · Answer

x000D   x000D  function getComboA selectObject    x000D    var value   selectObject value    x000D    console log value   x000D    x000D   lt select id  comboA  onchange  getComboA this   gt  x000D     lt option value    gt Select combo lt  option gt  x000D     lt option value  Value1  gt Text1 lt  option gt  x000D     lt option value  Value2  gt Text2 lt  option gt  x000D     lt option value  Value3  gt Text3 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    The above example gets you the selected value of combo box on OnChange event

[javascript] How to pass parameters on onChange of html select

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to combobox

Examples related to onchange