up vote 2 down vote favorite

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?

share|improve this question
When you want to read it? In response to what event? – Shadow Wizard Jul 13 '11 at 8:09

3 Answers

up vote 4 down vote accepted 
document.getElementById("item1").value;
share|improve this answer
James Allardice: You mean there is no need to do like detai1.item1 – Romi Jul 13 '11 at 7:00
@Makram this wont work as the current html doesnot contains value in options. – sushil bharwani Jul 13 '11 at 7:02
@sushil bharwani Actually it will work, because the first option is always selected - jsfiddle.net/VUNb3 – Bakudan Jul 13 '11 at 7:55
up vote 1 down vote 

document.getElementById("item1").onchange = function(){
var selIndex = document.getElementById("item1").selectedIndex;
var selValue = document.getElementById("item1").options[selIndex].innerHTML;
}
share|improve this answer
Two errors in one line: options is array and option element has no innerHTML just value or text. – Shadow Wizard Jul 13 '11 at 8:07
@Shadow. Please try running the code. thanks for -1 though – sushil bharwani Jul 13 '11 at 8:10
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. – Shadow Wizard Jul 13 '11 at 8:20
up vote 1 down vote

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.

share|improve this answer
Where did you see jQuery? Why you assume it can be used? – Shadow Wizard Jul 13 '11 at 8:08
@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 $ _ – Bakudan Jul 13 '11 at 8:16
2  
@shadow please read carefully. Before taking some action – sushil bharwani Jul 13 '11 at 8:17
1  
@Bakudan agree with you. You mentioned the correct way. – sushil bharwani Jul 13 '11 at 8:22
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. – Shadow Wizard Jul 13 '11 at 8:27

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.