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

can you post some code please? – KJYe.Name Feb 17 '11 at 01:08 — KJYe.Name, Feb 17 '11 at 01:08

score 492 · Accepted Answer · edited Jan 09 '20 at 10:57

492

function getComboA(selectObject) {
  var value = selectObject.value;  
  console.log(value);
}

<select id="comboA" onchange="getComboA(this)">
  <option value="">Select combo</option>
  <option value="Value1">Text1</option>
  <option value="Value2">Text2</option>
  <option value="Value3">Text3</option>
</select>

The above example gets you the selected value of combo box on OnChange event.

edited Jan 09 '20 at 10:57

A. Meshu

4,053
2
20
34

answered Feb 17 '11 at 01:13

Piyush Mattoo

15,454
6
47
56

Thanks, this has worked for me. Basically I want to show the same combobox at different place,so i gave 2 different ids to 2 combobox.Is there anyway, that i can show the same combobox at different place. Any help will be greatly appreciated. – Gendaful Feb 17 '11 at 15:50
14

A more succinct way to retrieve the value inside `getComboA()` is `var value = sel.value;` – Yony Sep 13 '12 at 01:37
4

The change event fires only if the select box loses focus. Is there a way to fire the event immediately after a value changes? – doABarrelRoll721 Feb 19 '16 at 18:42
3

use this.value instead and it will work =) sending this is sending the whole select element – Colin Rickels Oct 28 '16 at 12:58
For my case, code is working on Firefox but not on Chrome. – avijit Jan 10 '20 at 21:00

score 74 · Answer 2 · edited Jan 09 '20 at 11:03

74

Another approach wich can be handy in some situations, is passing the value of the selected <option /> directly to the function like this:

function myFunction(chosen) {
  console.log(chosen);
}

<select onChange="myFunction(this.options[this.selectedIndex].value)">
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
</select>

edited Jan 09 '20 at 11:03

A. Meshu

4,053
2
20
34

answered Apr 11 '13 at 23:29

Cazuma Nii Cavalcanti

1,710
15
9

1

This was exactly what I needed. Already had a javascript function that changed color pic's when clicking color swatches. But had a request for it to work on the PayPal dropdown select options as well. Used this but instead of using 'value' (since I needed it for Paypal) I added a 'label' to each option with the variable names I used to change the pics. Worked perfectly! Thanks!! – FlashNoob468 Sep 17 '14 at 18:00
7

This is nice. Another simpler an valid option is: – Daniel Silva Sep 09 '19 at 14:19
1

Useful to access other attributes of the selected option. – Cees Timmerman Mar 20 '20 at 11:49

score 35 · Answer 3 · edited Nov 30 '15 at 19:33

35

For how to do it in jQuery:

<select id="yourid">
<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>
</select>

<script src="jquery.js"></script>
<script>
$('#yourid').change(function() {
  alert('The option with value ' + $(this).val() + ' and text ' + $(this).text() + ' was selected.');
});
</script>

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.

edited Nov 30 '15 at 19:33

the

21,007
11
68
101

answered Feb 17 '11 at 01:19

aiham

3,614
28
32

2

I tried this, but change function is not getting called even if I put in document.ready method. My code is htmlData.push(' – Gendaful Feb 17 '11 at 15:32
@Gendaful: `htmlData.push($(' – Johannes Sep 26 '17 at 13:04

score 22 · Answer 4 · answered Feb 28 '19 at 06:05

22

JavaScript Solution

<select id="comboA">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>

<script>
 document.getElementById("comboA").onchange = function(){
    var value = document.getElementById("comboA").value;
 };
</script>

or

<script>
 document.getElementById("comboA").onchange = function(evt){
    var value = evt.target.value;
 };
</script>

or

<script>
 document.getElementById("comboA").onchange = handleChange;

 function handleChange(evt){
    var value = evt.target.value;
 };
</script>

answered Feb 28 '19 at 06:05

RobertKim

231
2
4

1

This is the most general and comprehensive solution here. Thanks! – divs1210 Jun 13 '20 at 19:14
This solution worked for me. I was able to implement easily without libraries. Pure vanilla. Very good! – Grogu Jan 17 '21 at 19:52

score 6 · Answer 5 · edited Jul 24 '13 at 02:40

6

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.

edited Jul 24 '13 at 02:40

Samuel Liew

76,741
107
159
260

answered Feb 13 '13 at 19:40

Michael Plautz

3,578
4
27
40

1

Your evil `eval`-like string-to-code conversion is not necessary. Actually `newSelect.onchange = changeitem;` works fine if you rewrite changeitem as `var changeitem = function () {console.log(this.selectedIndex); };` (i.e. using `this` instead of a function argument). Or, leave `changeitem` as is and write `newSelect.onchange = function () {changeitem(this); };`. – Steve Byrnes Mar 02 '13 at 15:45
1

newSelect.setAttribute('onchange', 'changeitem(this)'); - cheers for that – Eggcellentos Jan 25 '18 at 12:12

score 5 · Answer 6 · answered Jan 02 '14 at 06:04

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();
// => 1

The second is the text value of the select.
For example, using the following select box:

<select id="myselect">
  <option value="1">Mr</option>
  <option value="2">Mrs</option>
  <option value="3">Ms</option>
  <option value="4">Dr</option>
  <option value="5">Prof</option>
</select>

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();
// => "Mr"

function getComboA(selectObjectValue) {
   console.log(selectObjectValue);
}

<select id="comboA" onchange="getComboA(this.value)">
   <option value="">Select combo</option>
   <option value="Value1">Text1</option>
   <option value="Value2">Text2</option>
   <option value="Value3">Text3</option>
</select>

score 2 · Answer 11 · answered Oct 30 '19 at 06:35

Just in case someone is looking for a React solution without having to download addition dependancies you could write:

<select onChange={this.changed(this)}>
   <option value="Apple">Apple</option>
   <option value="Android">Android</option>                
</select>

changed(){
  return e => {
    console.log(e.target.value)
  }
}

Make sure to bind the changed() function in the constructor like:

this.changed = this.changed.bind(this);

score 1 · Answer 12 · answered Mar 31 '13 at 09:44

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.

<html>
    <head>
        <title>Register</title>
    </head>
    <body>
    <script>
        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";
                  }
        }
    </script>
            <form action="#" method="post">
                <table>
                    <tr>
                        <td><label>Name </label></td>
                        <td><input type="text" id="name" size=20 maxlength=20 value=""></td>
                    </tr>
                    <tr style="display:block;" id="enroll1">
                        <td><label>Enrollment No. </label></td>
                        <td><input type="number" id="enroll" style="display:block;" size=20 maxlength=12 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Email </label></td>
                        <td><input type="email" id="emailadd" size=20 maxlength=25 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Mobile No. </label></td>
                        <td><input type="number" id="mobile" size=20 maxlength=10 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Address</label></td>
                        <td><textarea rows="2" cols="20"></textarea></td>
                    </tr>
                    <tr >
                        <td><label>Category</label></td>
                        <td><select id="category" onchange="show()">    <!--onchange show methos is call-->
                                <option value="Student">Student</option>
                                <option value="Parents">Parents</option>
                                <option value="Guardians">Guardians</option>
                            </select>
                        </td>
                    </tr>
                </table><br/>
            <input type="submit" value="Sign Up">
        </form>
    </body>
</html>

score 1 · Answer 13 · answered Jul 27 '22 at 18:52

1

function setMyValue(v) {
  console.log(v);
}

<select onchange="setMyValue(this.value)">
  <option value="a">1</option>
  <option value="b">2</option>
  <option value="c">3</option>
</select>

answered Jul 27 '22 at 18:52

wcb1

665
1
7
6

score 0 · Answer 14 · edited Sep 05 '19 at 06:08

0

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())" });

edited Sep 05 '19 at 06:08

sandip

533
9
29

answered Oct 24 '18 at 18:42

Deepak Singla

116
1
5

score 0 · Answer 15 · edited Oct 01 '21 at 11:32

Simply:

function retrieve(){
alert(document.getElementById('SMS_recipient').options[document.getElementById('SMS_recipient').selectedIndex].text);
}

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);
}

<HTML>
<BODY>
  <p>RETRIEVING TEXT IN OPTION OF SELECT </p>
  <form name="myForm" action="">
    <P>Select:
      <select id="SMS_recipient">
        <options value='+15121234567'>Andrew</option>
          <options value='+15121234568'>Klaus</option>
      </select>
    </p>
    <p>
      <!-- Note: Despite the script engine complaining about it the code works!-->
      <input type="button" onclick="retrieve()" value="Try it" />
      <input type="button" onclick="retrieve_other()" value="Try Form" />
    </p>
  </form>
</HTML>
</BODY>

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

score 0 · Answer 16 · answered Apr 05 '22 at 11:20

0

 //html code
   <select onchange="get(this)">
      <option value="a">1</option>
      <option value="b">2</option>
      <option value="c">3</option>
    </select>

//javscript code
   function get(select) {
      let value = select.value;  
      console.log(value);
    }

answered Apr 05 '22 at 11:20

Omar Saade

320
2
8

Please edit your answer and add a little textual explanation why and how it works and how it differs from the other answer. – ahuemmer Apr 07 '22 at 11:54

score 0 · Answer 17 · answered May 08 '23 at 17:54

0

I would think the preferred way to attach the event handler now (instead of onchange= attribute) is

document.querySelector('whatever').addEventListener('change', (event) => {
   const theValue = event.target.value;
})

answered May 08 '23 at 17:54

grantwparks

1,124
9
13

How to pass parameters on onChange of html select

17 Answers17

JavaScript Solution

jQuery solution

See also

Linked

Related