how to pass the content of option element in Javascript function

Question

<select onchange="showResult(this.value)">
    <option value="AAA">London</option>
    <option value="BBB">France</option>
    <option value="ccc">Berlin</option>
    <option value="DDD">Rome</option>
</select>

In above code, the value of each <option> has been passed as parameter in showResult().

My questions is how to pass the content of option element (i.e.'London','France', 'Berlin', 'Rome') as parameter in showResult().

Many Thanks

you should pick one answer and accept it – Fabrizio Calderan Mar 07 '14 at 08:33 — Fabrizio Calderan, Mar 07 '14 at 08:33

score 1 · Answer 1 · answered Feb 14 '12 at 09:31

1

[yourselect].options[0].text returns 'London', [yourselect].options[1].text France, etc. So, in other words, for every option of an options-nodeList the property text contains its content.

answered Feb 14 '12 at 09:31

KooiInc

119,216
31
141
177

yup, and here's an official reference: http://www.w3schools.com/jsref/prop_option_text.asp – Nitzan Tomer Feb 14 '12 at 09:36

Fabrizio Calderan · Answer 2 · 2012-02-14T09:44:13.903

write this code

<select onchange="showResult(this.options[this.selectedIndex])">
    <option value="AAA">London</option>
    <option value="BBB">France</option>
    <option value="ccc">Berlin</option>
    <option value="DDD">Rome</option>
</select>

so you will pass the whole selected option node to the showResult function and you will be able to access both the value and text

function showResult(opt) {
    alert(opt.value);     /* e.g. DDD */
    alert(opt.text);      /* e.g. Rome */
}

Example Fiddle : http://jsfiddle.net/xypGa/

score 0 · Answer 3 · answered Feb 14 '12 at 09:33

0

Try this.options[this.selectedIndex].text, been a while since I did this without jQuery.

answered Feb 14 '12 at 09:33

Mikael Härsjö

1,048
6
14

score 0 · Answer 4 · answered Feb 14 '12 at 09:35

0

function showResult()
{
   var value = this.options[this.selectedIndex].value;
   var content = this.options[this.selectedIndex].text;
}

answered Feb 14 '12 at 09:35

mihai

37,072
9
60
86

score 0 · Answer 5 · edited May 23 '17 at 10:34

0

Is this question about your issue - Get selected value in dropdown list using JavaScript? ?

in general - document.FORM.FIELDMANE.options[document.FORM.FIELDMANE.selectedIndex].value

in your case it should be i suppose - onchange="showResult(this.options[this.selectedIndex].value)

edited May 23 '17 at 10:34

Community

1
1

answered Feb 14 '12 at 09:35

shershen

9,875
11
39
60

score 0 · Answer 6 · answered Feb 14 '12 at 09:38

Instead of passing this.value (the value property of the select element), pass this (the select element), i.e. onchange="showResult(this)", and use code like

function showResult(selectElem) {
  var optionText = selectElem.options[selectElem.selectedIndex].text;
  alert(optionText); // replace by real code that uses the string
}

An added advantage is that now the function has access to the entire element, so that if you later need to use the value property, too, in the function, you can do that without modifying the function calls.

score 0 · Answer 7 · answered Feb 14 '12 at 09:51

0

<select onchange="showResult(this.options[this.selectedIndex].text)">
    <option value="AAA">London</option>
    <option value="BBB">France</option>
    <option value="ccc">Berlin</option>
    <option value="DDD">Rome</option>
</select>

answered Feb 14 '12 at 09:51

Hắc Huyền Minh

1,025
10
13

how to pass the content of option element in Javascript function

7 Answers7