How to get the select value?

Question

I have this code that get seletedIndex==1 and make the div visible when selectedindex==1, what I want to do is to get the selectvalue not the index. Please teach me please. I'm new in javascript. if(document.frmregister.n_mode.selectedIndex==1) just like this to change selectedIndex==1 into selectvalue?

function BID_RFQ() {
    if (document.frmregister.n_mode.selectedIndex == 1) {
        document.getElementById("bidrfq").style.visibility = 'visible';
        document.getElementById("bidrfq").style.overflow = 'visible';
    } else if (document.frmregister.n_mode.selectedIndex == 2) {
        document.getElementById("bidrfq").style.visibility = 'visible';
        document.getElementById("bidrfq").style.overflow = 'visible';
    } else {
        document.getElementById("bidrfq").style.visibility = 'hidden';
        document.getElementById("bidrfq").style.overflow = 'hidden';
    }
    return true;
}

try `document.frmregister.n_mode.value` – Sep 16 '13 at 23:38 — , Sep 16 '13 at 23:38

score 1 · Answer 1 · answered Sep 16 '13 at 23:41

1

You're looking for this, I believe:

document.frmregister.n_mode.options[document.frmregister.n_mode.selectedIndex].value

answered Sep 16 '13 at 23:41

Shylo Hana

1,792
13
10

Hi Shylo, i tried your suggestion but it doesn't work. document.frmregister.waa.options[document.frmregister.waa.selectedIndex].value==BIDDING – Wade Sep 17 '13 at 00:00
it's works ^_^ thanks, i just missed to edit some name elements :) thank you so much. – Wade Sep 17 '13 at 00:07
No Problem. Enjoy. It should open up a lot more interesting things you can do with your JS. Especially when you start using "onChange" events with the – Shylo Hana Sep 17 '13 at 01:23

user2736012 · Answer 2 · 2013-09-17T13:49:23.957

0

If you want the value of the selected option, you can get it with the .value property of the select element.

console.log(document.frmregister.n_mode.value);

This will automatically give you the .value of the selected option element, or if there's no value defined, it'll give you the .text of the option.

demo: http://jsfiddle.net/WdMTJ/

Note that as @RobG stated below, IE8 and lower will not return the .text if the <option> elements do not have value attributes. As such, you'll want to be certain that the values have been explicitly included.

edited Sep 17 '13 at 13:49

answered Sep 16 '13 at 23:41

user2736012

3,543
16
13

@user2736012—your assertion is per the DOM spec, but in older versions of IE where option elements don't have a value attribute, the returned value is not the text. – RobG Sep 17 '13 at 00:12
@RobG: Yes, but that's in quite old versions, IE6 and maybe IE7 IIRC. I'm not terribly compelled to provide solutions for those browsers at this point. – user2736012 Sep 17 '13 at 00:27
@user2736012—it occurs in IE 8 also. The solution is to either always have a value attribute or property, or take a guess that if the value property is "" (empty string) then use the text property of the selected option. Likely there are devices based on IE that have the same issue. – RobG Sep 17 '13 at 05:38
@RobG: Hmm... I wasn't aware that IE8 was an issue. I'll update to note that `value` attributes will be required for broadest compatibility. I do still prefer this solution for its brevity and clarity. – user2736012 Sep 17 '13 at 13:48

score 0 · Answer 3 · answered Sep 16 '13 at 23:49

<html>
  <head>
    <script>
function BID_RFQ() {
    var n_mode = document.getElementById('n_mode');
    var bidrfq = document.getElementById('bidrfq');

    console.log(n_mode);
    /* Here's the important part. */
    var selectedOptionValue = n_mode.options[n_mode.selectedIndex].value;

    var visibility='visible',overflow='visible';

    if (selectedOptionValue  != 'One' && selectedOptionValue!='Two') {
      visibility=overflow='hidden';
    }

    bidrfq.style.visibility = visibility;
    bidrfq.style.overflow = overflow;

    return true;
}
    </script>
  </head>
  <body>
   <form id='frmregister'>
    <select id='n_mode' onchange='BID_RFQ()'>
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
    </form>

    <div id="bidrfq">bidrfq</div>
  </body>
</html>

An upvote or accepting an answer is usually the best way to thank somebody. :) — UFL1138, Sep 17 '13 at 02:09

How to get the select value?

3 Answers3