How to show text of selectbox to a textbox?

Question

How can I show the text of selectbox to each textbox based on selected event? My code only shows the value of selectbox to textbox. I want to replace it with text of each option.

Here is my code:

var selectBox = document.getElementById('mySelect');
var selectBox2 = document.getElementById('mySelect2');

selectBox.addEventListener('change', handleChange);
selectBox2.addEventListener('change', handleChange);
                           
function handleChange(event)
{
    if (event.target.id == "mySelect") {
      document.getElementById('myInput').value = selectBox.value;
    } else {
      document.getElementById('myInput2').value = selectBox2.value;
    }
}

<select id="mySelect">
    <option value="Option 1"> this Text</option>
    <option value="Option 2">this Text 2</option>
</select>
<select id="mySelect2">
    <option value="Option 1">this Text</option>
    <option value="Option 2">this Text 2 </option>
</select>


<input type="text" id="myInput" />
<input type="text" id="myInput2" />

Nisarg Shah · Accepted Answer · 2017-09-10T06:04:41.340

You can access the label of selected option using selectedOptions[0].text on select element.

var selectBox = document.getElementById('mySelect');
var selectBox2 = document.getElementById('mySelect2');

selectBox.addEventListener('change', handleChange);
selectBox2.addEventListener('change', handleChange);
                           
function handleChange(event)
{
    if (event.target.id == "mySelect") {
      document.getElementById('myInput').value = selectBox.selectedOptions[0].text;
    } else {
      document.getElementById('myInput2').value = selectBox2.selectedOptions[0].text;
    }
}

// Set initial values:
document.getElementById('myInput').value = selectBox.selectedOptions[0].text;
document.getElementById('myInput2').value = selectBox2.selectedOptions[0].text;

<select id="mySelect">
    <option value="Option 1"> this Text</option>
    <option value="Option 2">this Text 2</option>
</select>
<select id="mySelect2">
    <option value="Option 1">this Text</option>
    <option value="Option 2">this Text 2 </option>
</select>


<input type="text" id="myInput" />
<input type="text" id="myInput2" />

Thank you so much. there is a question of you . how can i show the first result in textboxes before changing the selectbox? — , Sep 10 '17 at 06:03
I updated the answer. Basically, you need to check the initial value when the page loads, and set them to the textbox accordingly. Ideally I would wrap it in a [document.ready](https://learn.jquery.com/using-jquery-core/document-ready/) as well. — Nisarg Shah, Sep 10 '17 at 06:05

adeneo · Answer 2 · 2017-09-10T06:03:47.310

You'd use the textContent of the options instead of the value

var selectBox = document.getElementById('mySelect');
var selectBox2 = document.getElementById('mySelect2');

selectBox.addEventListener('change', handleChange);
selectBox2.addEventListener('change', handleChange);
                           
function handleChange(event) {
    if (event.target.id == "mySelect") {
      var index  = selectBox.selectedIndex;
      var option = selectBox.options[index]
      document.getElementById('myInput').value = option.textContent;
    } else {
      var index  = selectBox2.selectedIndex;
      var option = selectBox2.options[index];
      document.getElementById('myInput2').value = option.textContent;
    }
}

<select id="mySelect">
    <option value="Option 1"> this Text</option>
    <option value="Option 2">this Text 2</option>
</select>
<select id="mySelect2">
    <option value="Option 1">this Text</option>
    <option value="Option 2">this Text 2 </option>
</select>


<input type="text" id="myInput" />
<input type="text" id="myInput2" />

Or using jQuery

$('#mySelect, #mySelect2').on('change', function() {
  $('#'+this.id.replace('mySelect', 'myInput')).val($('option:selected', this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect">
    <option value="Option 1"> this Text</option>
    <option value="Option 2">this Text 2</option>
</select>
<select id="mySelect2">
    <option value="Option 1">this Text</option>
    <option value="Option 2">this Text 2 </option>
</select>


<input type="text" id="myInput" />
<input type="text" id="myInput2" />

score 0 · Answer 3 · answered Sep 10 '17 at 05:56

0

$('.mySelect').change(function(){
     var select_box_val = $(this).val();
     $('#myInput').val(select_box_val)
});

Try the above code.

answered Sep 10 '17 at 05:56

Nikhil G

2,096
14
18

score 0 · Answer 4 · answered Sep 10 '17 at 05:58

0

node.value is always going to read the value attribute of input . you can just replace the value with the value you actually trying to pass .

Ex;

   <option value="this Text">this Text</option>
        <option value="this Text 2">this Text 2 </option>

answered Sep 10 '17 at 05:58

Nirmal Dey

191
5

That is counter-intuitive. You would often want the option and the value to be different things. – Nisarg Shah Sep 10 '17 at 06:01

score 0 · Answer 5 · answered Sep 10 '17 at 05:59

Here you go, in case you want the selected option instead just change .text to .value like,

 document.getElementById('myInput').value = selectBox.options[selectBox.selectedIndex].value;

var selectBox = document.getElementById('mySelect');
var selectBox2 = document.getElementById('mySelect2');

selectBox.addEventListener('change', handleChange);
selectBox2.addEventListener('change', handleChange);
                           
function handleChange(event)
{
    if (event.target.id == "mySelect") {
    
      document.getElementById('myInput').value = selectBox.options[selectBox.selectedIndex].text;
    } else {
      document.getElementById('myInput2').value = document.getElementById('myInput2').value = selectBox2.options[selectBox2.selectedIndex].text;
    }
}

<select id="mySelect">
    <option value="Option 1"> this Text</option>
    <option value="Option 2">this Text 2</option>
</select>
<select id="mySelect2">
    <option value="Option 1">this Text</option>
    <option value="Option 2">this Text 2 </option>
</select>


<input type="text" id="myInput" />
<input type="text" id="myInput2" />

How to show text of selectbox to a textbox?

5 Answers5