CODEWITHSUNDEEP
javascript
Siva
Siva

Reputation: 3738

Get selected value/text from Select on change

<select onchange="test()" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
</select>

I need to get the value of the selected option in javascript: does anyone know how to get the selected value or text, please tell how to write a function for it. I have assigned onchange() function to select so what do i do after that?

Upvotes: 195

Views: 908218

Answers (19)

YakovL
YakovL

Reputation: 8365

Wow, no really reusable solutions among answers yet.. I mean, a standard event handler should get only an event argument and doesn't have to use ids at all.. I'd use:

function handleSelectChange(event) {

    // if you want to support some really old IEs, add
    // event = event || window.event;

    var selectElement = event.target;

    var value = selectElement.value;
    // to support really old browsers, you may use
    // selectElement.value || selectElement.options[selectElement.selectedIndex].value;
    // like el Dude has suggested

    // do whatever you want with the value
}

You may use this handler with each – inline js:

<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

jQuery:

jQuery('#select_id').on('change',handleSelectChange);

or vanilla JS handler setting:

var selector = document.getElementById("select_id");
selector.onchange = handleSelectChange;
// or
selector.addEventListener('change', handleSelectChange);

And don't have to rewrite this for each select element you have.

Example snippet:

function handleSelectChange(event) {

    var selectElement = event.target;
    var value = selectElement.value;
    alert(value);
}
<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

Upvotes: 68

Du-Lacoste
Du-Lacoste

Reputation: 12787

Once the onChange is invoked you can add either JS or JQuery Code Snippet to get your thought working.

//Javascript

document.getElementById("select_id").selectedIndex // prints text value of the option
document.getElementById("select_id").value // prints the value of the option 

//JQUERY 

var selected = $('#select_id option:selected').val(); 
// prints the **value** of the option clicked in the dropdown
    
var selected = $('#select_id option:selected').html(); 
// prints the **text** of the option clicked in the dropdown

Upvotes: 1

Omar Saade
Omar Saade

Reputation: 595

You can get the value from the select element by passing "this.value" as a parameter to your function named test(this.value) and after that You should create the function with a parameter inside the script element and finally you can write console.log(number) inside this function to get Your selected value.

function test(number) {
  console.log(number)
}
<!DOCTYPE html>
<html>

<body>

  <p>Select a new car from the list.</p>
  <select onchange="test(this.value)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
  </select>

</body>

</html>

Upvotes: 1

OZZIE
OZZIE

Reputation: 7388

Why overcomplicate it:

var select = document.querySelector('select#id.orClass');
select.addEventListener('change', function(e) {
  console.log(select.value);

  // or if it changes dynamically
  console.log(e.target.value);      
});


 let select = document.getElementById('select_id');
  select.addEventListener('change', function() {
    console.log(select.value);
    // just for test
    alert(select.value);
  });
<select id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
</select>

Upvotes: 9

Beauty Of Salvation In Christ
Beauty Of Salvation In Christ

Reputation: 21

You set the onchange handler to some function or string. In it, you write code to get value

document.getElementById('cphForm_ddlFacility').value;

or, for older browsers

document.getElementById('cphForm_ddlFacility')[document.getElementById('cphForm_ddlFacility').selectedIndex].value

Upvotes: -1

Sani
Sani

Reputation: 301

In html

(change)="onChangeCategory($event)"

In javascript/typescript

onChangeCategory(event: any) {
    console.log(event.target.options[event.target.selectedIndex].value);
    console.log(event.target.options[event.target.selectedIndex].text);
}

Upvotes: 4

Mohammad Ali Abdullah
Mohammad Ali Abdullah

Reputation: 331

        $('#select_id').change(function(){
        // selected value 
        alert($(this).val());
        // selected text 
        alert($(this).find("option:selected").text());
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<select onchange="test()" id="select_id">
        <option value="0">-Select-</option>
        <option value="1">Communication</option>
    </select>

Upvotes: 6

Russell Strauss
Russell Strauss

Reputation: 1200

let dropdown = document.querySelector('select');
if (dropdown) dropdown.addEventListener('change', function(event) {
    console.log(event.target.value);
});

Upvotes: 18

Brandon G
Brandon G

Reputation: 2893

If you're googling this, and don't want the event listener to be an attribute, use:

document.getElementById('my-select').addEventListener('change', function() {
  console.log('You selected: ', this.value);
});
<select id="my-select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Upvotes: 113

el Dude
el Dude

Reputation: 5183

function test(a) {
    var x = (a.value || a.options[a.selectedIndex].value);  //crossbrowser solution =)
    alert(x);
}
<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2">Communication</option>
    <option value="3">Communication</option>
</select>

Upvotes: 39

Alex
Alex

Reputation: 2126

HTML:

<select onchange="cityChanged(this.value)">
      <option value="CHICAGO">Chicago</option>
      <option value="NEWYORK">New York</option>
</select>

JS:

function cityChanged(city) {
    alert(city);
}

Upvotes: 9

Vlad Pintea
Vlad Pintea

Reputation: 853

This is an old question, but I am not sure why people didn't suggest using the event object to retrieve the info instead of searching through the DOM again.

Simply go through the event object in your function onChange, see example bellow

function test() { console.log(event.srcElement.value); }

http://jsfiddle.net/Corsico/3yvh9wc6/5/

Might be useful to people looking this up today if this wasn't default behavior 7 years ago

Upvotes: 4

samzna
samzna

Reputation: 435

function test(){
  var sel1 = document.getElementById("select_id");
  var strUser1 = sel1.options[sel1.selectedIndex].value;
  console.log(strUser1);
  alert(strUser1);
  // Inorder to get the Test as value i.e "Communication"
  var sel2 = document.getElementById("select_id");
  var strUser2 = sel2.options[sel2.selectedIndex].text;
  console.log(strUser2);
  alert(strUser2);
}
<select onchange="test()" id="select_id">
  <option value="0">-Select-</option>
  <option value="1">Communication</option>
</select>

Upvotes: 2

SSD
SSD

Reputation: 1391

I wonder that everyone has posted about value and text option to get from <option> and no one suggested label.

So I am suggesting label too, as supported by all browsers

To get value (same as others suggested)

function test(a) {
var x = a.options[a.selectedIndex].value;
alert(x);
}

To get option text (i.e. Communication or -Select-)

function test(a) {
var x = a.options[a.selectedIndex].text;
alert(x);
}

OR (New suggestion)

function test(a) {
var x = a.options[a.selectedIndex].label;
alert(x);
}

HTML

<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2" label=‘newText’>Communication</option>
</select>

Note: In above HTML for option value 2, label will return newText instead of Communication

Also

Note: It is not possible to set the label property in Firefox (only return).

Upvotes: 9

Hussein
Hussein

Reputation: 42818

Use either JavaScript or jQuery for this.

Using JavaScript

<script>
function val() {
    d = document.getElementById("select_id").value;
    alert(d);
}
</script>

<select onchange="val()" id="select_id">

Using jQuery 

$('#select_id').change(function(){
    alert($(this).val());
})

Upvotes: 189

MiPnamic
MiPnamic

Reputation: 1267

<script>
function test(a) {
    var x = a.selectedIndex;
    alert(x);
}
</script>
<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2">Communication</option>
    <option value="3">Communication</option>
</select>

in the alert you'll see the INT value of the selected index, treat the selection as an array and you'll get the value

Upvotes: 7

Vishnu S Babu
Vishnu S Babu

Reputation: 1640

function test(){
  var sel1 = document.getElementById("select_id");
  var strUser1 = sel1.options[sel1.selectedIndex].value;
  console.log(strUser1);
  alert(strUser1);
  // Inorder to get the Test as value i.e "Communication"
  var sel2 = document.getElementById("select_id");
  var strUser2 = sel2.options[sel2.selectedIndex].text;
  console.log(strUser2);
  alert(strUser2);
}
<select onchange="test()" id="select_id">
  <option value="0">-Select-</option>
  <option value="1">Communication</option>
</select>

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Upvotes: 0

CloudyMarble
CloudyMarble

Reputation: 37576

Use 

document.getElementById("select_id").selectedIndex

Or to get the value:

document.getElementById("select_id").value

Upvotes: 7

Danny
Danny

Reputation: 329

No need for an onchange function. You can grab the value in one line:

document.getElementById("select_id").options[document.getElementById("select_id").selectedIndex].value;

Or, split it up for better readability:

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

select_id.options[select_id.selectedIndex].value;

Upvotes: 32

Related Questions