read selected value from select tag of HTML using javascript code

Question

My HTML code is as:

 <div id="detail">
    <div class="d_left">
    Page <strong>1</strong> of 107
    </div>
    <div class="d_center">
    <table>
    <tr>
    <td><a href="#">Previous</a> | <a href="#">Next</a>
    <img src="/webProject/store/images/arrow.png" align="absmiddle" alt="">
    </td></tr></table>
    </div>
    <div class="d_right">
    Sort by:
     <select name="featured" size="1" id="item1">
          <option>Featured Items1</option>
          <option>Featured Items2</option>
          <option>Featured Items3</option>
          <option>Featured Items4</option>
        </select>
    </div>
</div>

Now, I want to read selected value from <select name="featured" size="1" id="item1">. How can I do this using JavaScript?

When you want to read it? In response to what event?

user447356
– user447356

2011-07-13 08:09:36 +00:00
Commented Jul 13, 2011 at 8:09 — user447356
– user447356, Commented Jul 13, 2011 at 8:09

Makram Saleh · Accepted Answer · 2011-07-13 06:53:44Z

15

document.getElementById("item1").value;

answered Jul 13, 2011 at 6:53

Makram Saleh

8,6814 gold badges30 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Romi Over a year ago

James Allardice: You mean there is no need to do like detai1.item1

sushil bharwani Over a year ago

@Makram this wont work as the current html doesnot contains value in options.

Bakudan Over a year ago

@sushil bharwani Actually it will work, because the first option is always selected - jsfiddle.net/VUNb3

Community · Accepted Answer · 2017-05-23 12:24:19Z

5

More Elegant variant of sushil bharwani solution

function $(id){return document.getElementById(id);}

var select = $("item1");
select.onchange = function() {
    var selIndex = select.selectedIndex;
    var selValue = select.options(selIndex).innerHTML;
}

As Shadow Wizard do not like this solution I hope he will like that:

var select = document.getElementById("item1");
select.onchange = function() {
    var selIndex = select.selectedIndex;
    var selValue = select.options(selIndex).innerHTML;
}

The main idea in these two example is to reduce the usage of getElementById. No point to execute it more than once - thus minimizing the access to the DOM.

For those who feel brave enough :) there is this new thing querySelector()^{mdn, msdn IE dev center, msdn, w3 spec}:

var select = document.querySelector("#item1");

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Jul 13, 2011 at 8:04

Bakudan

19.5k9 gold badges56 silver badges76 bronze badges

4 Comments

user447356 Over a year ago

Where did you see jQuery? Why you assume it can be used?

Bakudan Over a year ago

@Shadow Wizard it is pure JavaScript - no jQuery involved here. It is not a selector it is a short for getElementById. The function name can start with a-z A-Z $ _

user447356 Over a year ago

Sorry guys I used to work with IE7 for far too long saw now that options can be also accessed as a function and the $ stuff also confused me. Vote undone, will put more time to reading and testing in the future.

bora.oren Over a year ago

select.options(selIndex) this is not work, select.options[selIndex] this is work

sushil bharwani · Accepted Answer · 2011-07-13 08:11:48Z

3


document.getElementById("item1").onchange = function(){
var selIndex = document.getElementById("item1").selectedIndex;
var selValue = document.getElementById("item1").options[selIndex].innerHTML;
}

edited Jul 13, 2011 at 8:11

answered Jul 13, 2011 at 6:54

sushil bharwani

30.2k30 gold badges98 silver badges130 bronze badges

2 Comments

user447356 Over a year ago

Two errors in one line: options is array and option element has no innerHTML just value or text.

user447356 Over a year ago

OK, now that you fixed the array part (using square brackets) it's working in all major browsers - innerHTML didn't work for me long time ago guess it was "fixed" in IE7 and above.

Gurung · Accepted Answer · 2013-03-24 20:20:06Z

function delivery(x){
      var country = x.value;
      document.getElementById('lala').innerHTML = country;
}
<div id="lala"></div>
<form action="" method="post">
<select name="country" id="country" onChange="delivery(this)">
    <option value='lala'>Select Country</option>
    <option value='United_Kingdom'>United Kingdom</option>
    <option value='Russia'>Russia</option>
    <option value='Ukraine'>Ukraine</option>
    <option value='France'>France</option>
    <option value='Spain'>Spain</option>
    <option value='Sweden'>Sweden</option>
</select>
</form>

Here is how i solved my problem for selecting eu countries (i have removed most of them to make my codes shorter).. as im new to javascript.. i still need to learn javascript libraries.

Collectives™ on Stack Overflow

read selected value from select tag of HTML using javascript code

4 Answers 4

3 Comments

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related