1

I have this code, with books of the bible all within a element:

<option value="1">Genesis</option>
<option value="2">Exodus</option>
<option value="3">Leviticus</option>
<option value="4">Numbers</option>
<option value="5">Deuteronomy</option>
<option value="6">Joshua</option>
<option value="7">Judges</option>

To further explain, I have the value as the book ID, so when I go to fetch all the verses from my Database I can just refer to them by the book number.

But doing that, I have no way of getting the user viewed friendly name like "Genesis", so that I can format it like that.

How do I fetch this (the one currently selected, i.e. "Genesis" not '1') from JavaScript?

ilarsona
  • 436
  • 4
  • 13
  • What do you mean by "getting the user viewed friendly name"? Where do you need to get it? Are you setting the `selected` attribute of one of the options, and you need to fetch the text of the selected one? – cookie monster Jan 12 '14 at 22:35
  • Edit made. Hopefully that will be more specific. – ilarsona Jan 12 '14 at 22:36
  • You're not really explaining where you're stuck. Do you not know how to fetch a `select` element? Or do you not know how to get the currently selected `option`? Or do you not know how to get the text content from the option? – cookie monster Jan 12 '14 at 22:39
  • Right now I only know how to get the current value (document.getElementById('selector').value) but I don't know how to get the text content of the selected option. – ilarsona Jan 12 '14 at 22:42
  • 1
    Save the result of `getElementById` to a variable like `sel`, and then do `sel.options[sel.selectedIndex].text`. *(I'm assuming that you're fetching the `select` element)* – cookie monster Jan 12 '14 at 22:43
  • 1
    @cookiemonster It worked. If you want, you can form this comment into an answer so you can get awarded the points. – ilarsona Jan 12 '14 at 22:53
  • Sure, I'll put my comment as an answer. – cookie monster Jan 13 '14 at 00:09

2 Answers2

1

Save the result of your getElementById to a variable like sel, and then do this:

var text = sel.options[sel.selectedIndex].text;

Select elements have an .options property that gives you an array-like collection of all of its nested option elements. They also have a .selectedIndex property, which returns the index of the currently selected element.

Using the two of these, you can get the currently selected option. Then simply use .text to get the text content of the selected option.

If you don't need to support IE6/7, you can use document.querySelector() to make things a little shorter.

var text = document.querySelector("#the_select_id option:selected").text;

The querySelector() method returns a single element, or null if none was found. There's also a querySelectorAll() method that will return a collection of elements, useful for when your selector should match multiple elements.

cookie monster
  • 10,671
  • 4
  • 31
  • 45
0

If your parent element has name="books" as an attribute, and is a select element, then you can do this using jQuery:

var bookName = $('select[name="books"] option:selected').text();

If your parent element has an id="books" as an attribute, and is a select element, then you can do this using plain JavaScript (can probably be improved upon):

var books = document.getElementById('books');
var bookName = books.options[books.selectedIndex].text;
Neil Cresswell
  • 1,145
  • 8
  • 20