getting text from select options and sending it to input

Question

Want to hone in on my javascript. I want text from select-option dropdown sent to an input. ive found a way to do it.. but my question is- is there a shorter way (in vanilla javascript)?

<select id="gren" onChange="return func1(this)"><option>1</option><option>2</option>
<option>3</option><option>4</option></select>
<input style="text" id="testing">

with

<script>
function func1(select){
var rr = document.getElementById("gren");
var jest = rr.options[rr.selectedIndex].text;
document.getElementById("testing").value = jest; }
</script>

i was thinking something along the lines of:

function func1(select){document.getElementById("testing").value = 
this.options[select.selectedIndex].innerHTML;}

but it's not working.. why?

innherHTML = innerHTML. And what is not working? Errors in console? — A1rPun
– A1rPun, Commented Jan 17, 2014 at 11:54

Shn · Accepted Answer · 2014-01-17 11:59:33Z

2

<select id="gren" onChange="return func1(this)"><option>1</option><option>2</option>
<option>3</option><option>4</option></select>
<input style="text" id="testing">
<script>
function func1(select){document.getElementById("testing").value = 
select.value;}
</script>

OR

<select id="gren" onChange="return func1(this)"><option>1</option><option>2</option>
<option>3</option><option>4</option></select>
<input style="text" id="testing">
<script>
function func1(select){document.getElementById("testing").value = 
select.innerHTML;}
</script>

answered Jan 17, 2014 at 11:59

Shn

3682 silver badges11 bronze badges

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

Comments

Todd Motto · Accepted Answer · 2014-01-17 12:00:36Z

2

Shorter isn't always better, code clarity and readability is what you want - as well as good structure. If you want to improve your JavaScript then start by never using inline attributes for event handling, such as onchange.

Here's my jsFiddle and code below:

HTML:

<select class="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>
<input type="text" class="myInput">

JavaScript:

var select = document.querySelector('.mySelect');
var input = document.querySelector('.myInput');
var updateInput = function () {
    input.value = this.options[select.selectedIndex].innerHTML;
};
select.onchange = updateInput;

answered Jan 17, 2014 at 12:00

Todd Motto

9136 silver badges10 bronze badges

1 Comment

Todd Motto Over a year ago

@user3108832 Google around you'll find many reasons, the main being too tightly coupling HTML+JS, as well as the fact you're polluting the global scope with functions to make them accessible in the DOM. Plus this is 90's style coding, not 2014.

Dharmang · Accepted Answer · 2014-01-17 11:55:34Z

1

Try select variable instead of this keyword

function func1(select) {
    document.getElementById("testing").value = select.options[select.selectedIndex].innherHTML;
    //OR
    document.getElementById("testing").value = select.options[select.selectedIndex].text;
}

answered Jan 17, 2014 at 11:55

Dharmang

3,03837 silver badges40 bronze badges

Comments

Alex · Accepted Answer · 2014-01-17 11:56:08Z

1

You have wrong this using and syntax error:

function func1(select){document.getElementById("testing").value = 
**this**.options[select.selectedIndex].inn**h**erHTML;}

this is window in your code.

Try this:

 function func1(select){document.getElementById("testing").value = 
**select**.options[select.selectedIndex].innerHTML;}

answered Jan 17, 2014 at 11:56

Alex

11.3k13 gold badges53 silver badges64 bronze badges

Comments

Krish R · Accepted Answer · 2014-01-17 11:57:04Z

0

Try this,

 function func1(select){
      document.getElementById("testing").value = select.text;
  }

answered Jan 17, 2014 at 11:57

Krish R

22.7k7 gold badges54 silver badges60 bronze badges

Collectives™ on Stack Overflow

getting text from select options and sending it to input

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related