1

I have a form, which is generated by a ticket system, but I have to customize it.
In this form there is a select part with different options, each option got a value with a number and a text (between the tags). I can't change the value because the ticket system need it when you send the form to it. Now I have a function which collects some inputs and place it into a text field (which is also in the form) but, I need the text from the option tag not the value:

<select id="selectfield" bla bla bla>
  <option value="1"> something </option>
  <option value="2"> something different </option>
  <option value="3"> complete other text </option>
</select>

so when I try it with selectfield.value I get the value parameter, but I need the text. Is there any way I can get this text and let the value be still a number?

rtruszk
  • 3,902
  • 13
  • 36
  • 53
Bachillikum
  • 15
  • 1
  • 5
  • possible duplicate of [JavaScript retrieving the text of the selected option in select element](http://stackoverflow.com/questions/610336/javascript-retrieving-the-text-of-the-selected-option-in-select-element) – Vucko Apr 25 '14 at 23:42
  • Oh!! hey cool, i didn't see that, i didn't search with a javascript tag before... sorry for repost then i will try it right now. thanks for your fast reaction :D good guy vucko! – Bachillikum Apr 25 '14 at 23:49
  • head over [here][1] [1]: http://stackoverflow.com/questions/610336/javascript-retrieving-the-text-of-the-selected-option-in-select-element apparently you guys have the same question – d.bayo Apr 25 '14 at 23:49
  • hmm thats not the right method i need here, now.. 'cause the values, are not sorted like i wrote it here, its more: 12, 4, 17, 9, 7 ... but then, i just make a if else marathon and get the right option id to get the right text. thanks so much for help!! without you i didn't get the right direction – Bachillikum Apr 26 '14 at 00:16

2 Answers2

0

I think you might be looking for innerHTML have a look at, http://www.w3schools.com/jsref/prop_html_innerhtml.asp

You would need to assign an id to each option like:

<option id="option-1" value="1">Inner text</option>
...
<script>
var innerText = document.getElementById('option-1').innerHTML;
</script>
Nicholas Smith
  • 58
  • 6
  • hey thanks for you answer, but the select tag has an id which i use to get the right "field" so i can't read out the right option id i guess.. i think i have to make a if-else marathon to write the values into the option index or directly the text... ;) but thanks for your efford :D – Bachillikum Apr 26 '14 at 00:19
  • Oh you mean the text when you select in the select box? – Brendan Apr 26 '14 at 06:58
0

That answer above it a little tricky, so here's what i did:

  <script>
    function test() {
    var x = document.getElementById('selectfield').selectedIndex;
    alert(x);
    }
    </script>

and the HTML:

<select id="selectfield" onChange="test()">
  <option value="0"></option>
  <option value="1"> something </option>
  <option value="2"> something different </option>
  <option value="3"> complete other text </option>
</select>

Notice a few differences here. First, in the javascript, a DOM command called '.selectedIndex' which gets the option selected in the box.

Now for what I did to the HTML, Notice a couple of things. First, you have an event Handler called onChange which calls the function i created called test(). I also added a blank option so that if someone wanted to choose the first one they could, and not have to click the second option and then the first to get that particular choice. Honestly, those value="" attributes are not necessary now.

If you run the code, you might notice that instead of returning text, it returns a number. "A number?" you might ask, "I wanted the text!". Here is a solution I have for you:

var option_Array = [];
option_Array[0] = "";
option_Array[1] = "something";
option_Array[2] = "something different";
option_Array[3] = "complete other text";

Suppose you had an array of the options, now all you would have to do is use the variable x as the index number of the array like so:

option = option_Array[x];

Now the new variable option is equal to whatever item you clicked!

I hope this fully answers your question. I would appreciate any feedback on this answer, as it is 1:10 AM and I'm not perfect.

Just as a side note, it might be a good idea to put a parseInt() around var x = parseInt(document.getElementById('selectfield').selectedIndex); just in case it returns x as a string instead of a real integer.

Brendan
  • 1,399
  • 1
  • 12
  • 18
  • okay that looks like a nice solution too. but for now (i have added a "empty" first option too so the customer has to choose some thing) aber the customer chooses one option, it will trigger my function which if-else ask the value and assign the right index to: selecttext = document.getElementById('selectfield').options[10].text; – Bachillikum Apr 26 '14 at 07:56
  • yes it is a good way for me understanding this webcontructing javascript thing better, so all this answer will help me in one way or the other.. got another question, a little bit different problem, but same project... i got input fields for phone numbers with the size="-1" what does this do? can i set the size of other fields (e.g. emailadress) on the same value and it doesn't matter how long they really are? – Bachillikum Apr 26 '14 at 12:41
  • Is the size = "-1" an inline CSS style thats inside the `` tag? And do you have units for the `size` attribute? – Brendan Apr 26 '14 at 19:07
  • Ok I beleieve you mean a `font-size` attribute? And with a negative 1, I Think you are using `em` units instead of regular units because regular units cannot go negative. `em` gets the size of the current font. So `1em` is equal to the current size. `2em` is twice the size, and `-1em` means smaller still. – Brendan Apr 26 '14 at 19:11
  • Oh and also, if you want to elongate your input fields, you could easily make a css class. `input { width:100px; height:100px; }` Any input field should then be set to that height and width. Doing `input.classname` will turn it into a classname, meaning not all inputs have to be like that, just the ones that have `` – Brendan Apr 26 '14 at 19:17