How to display the value of a drop down menu somewhere else on a page?

Question

I have an extremely simple HTML page with two drop-down menus, one on the left and one on the right.

I would like to display the option that the user choses of the left menu above the left menu, and the chosen value from the right menu above the right menu. Both options can be identical or different, just text, and do not influence each other.

So far I've tried every solution that was explained here and here but nothing worked, even when I just copied and pasted the exact example codes into my html page.

This is what my code looks like right now:

<html>
<body>

<head>

<script type="text/javascript">

var select = document.getElementById('cmbitems');
var input = document.getElementById('txtname');
select.onchange = function() {
    input.value = select.value;
}


</script>


</head>


<table>
    <tr>
        <td colspan="2">DISPLAY</td>
    </tr>
    
        <tr>
        <td>RESULT 1 <input type="text" name="cmbitems" id="cmbitems" onClick="checkItem()"></td>
        <td>RESULT 2</td>
    </tr>
    <tr>
    
    <tr>
        <td>
        
        BEGINNING
        
        
<select name="cmbitems" id="cmbitems">
    <option value="name1">flow</option>
    <option value="name2">green</option>
    <option value="name3">red</option>
</select>      
        
        
        
        
        
        
        </td>
        <td>END
          
        
        
        </td>
    </tr>
</table>


</body>
</html>

I'd be grateful is someone could help out! Trying to make this just one page without external JS or JQuery calls... Thank you!

Do you want to display drop down selected value and text in separate input box — Vivek Gupta, May 07 '15 at 08:18
Basically I would like it to look/work like this:
TITLE
WORD SELECTED IN MENU 1 - WORD SELECTED IN MENU 2
MENU 1 - MENU 2 — MicroMachine, May 07 '15 at 08:33

score 0 · Answer 1 · answered May 07 '15 at 08:12

Try to put your script just before your </body>.

And also try to tidy up your code, your <head></head> is inside your body tags.

<html>

<head>
</head>

<body>

  <table>
    <tr>
      <td colspan="2">DISPLAY</td>
    </tr>

    <tr>
      <td>RESULT 1
        <input type="text" name="cmbitems" id="cmbitems" onClick="checkItem()">
      </td>
      <td>RESULT 2</td>
    </tr>
    <tr>

      <tr>
        <td>

          BEGINNING


          <select name="cmbitems" id="cmbitems">
            <option value="name1">flow</option>
            <option value="name2">green</option>
            <option value="name3">red</option>
          </select>

          <script type="text/javascript">
            var select = document.getElementById('cmbitems');
            var input = document.getElementById('txtname');
            select.onchange = function() {
              input.value = select.value;
            }
          </script>
</body>

</html>

score 0 · Answer 2 · answered May 07 '15 at 08:23

You this code

<html>
<body>

<head>

<script type="text/javascript">

var select = document.getElementById('cmbitems');

  var input1 = document.getElementById('txtname');
  var input2 = document.getElementById('txtname2');
  select.onchange = function() {
     input1.value = select.value;
     input2.value = select.options[select.selectedIndex].text;
   }


</script>


</head>


    <table>
    <tr>
        <td colspan="2">DISPLAY</td>
    </tr>

        <tr>
            <td>RESULT 1 <input type="text" name="cmbitems" id="txtname" onClick="checkItem()" /></td>
        <td>RESULT 2
          <input type="text" name="cmbitems" id="txtname2" onClick="checkItem()" />  
            </td>
    </tr>


    <tr>
        <td>

        BEGINNING


<select name="cmbitems" id="cmbitems">
    <option value="name1">flow</option>
    <option value="name2">green</option>
    <option value="name3">red</option>
</select>      
        </td>
        <td>END
        </td>
    </tr>
</table>


</body>
</html>

I tried to run the code you suggest from JSFIDDLE but it didn't seem to work — MicroMachine, May 07 '15 at 08:33

Manuel Bitto · Accepted Answer · 2015-05-07T21:17:19.493

There are several problems with your code:

Put the <script>...</script> block at the end of the page, otherwise JS won't find the html node that you refer in your code because the page is not loaded
You are defining two html elements with the same ID, and this breaks the JS code when you try to find one element by its id. This is the working version:

<html>

<head></head>

<body>
  
<table>
<tr>
<td colspan="2">DISPLAY</td>
</tr>

<tr>
<td>CHOICE 1 <input type="text" id="txtname" name="txtname" onClick="checkItem()"></td>
<td>CHOICE 2 <input type="text" id="txtname2" name="txtname2" onClick="checkItem()"></td>
</tr>
<tr>

<tr>
<td>

BEGINNING

<select name="cmbitems" id="cmbitems">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="turtle">turtle</option>
</select>      

</td>

<td>END


<select name="cmbitems2" id="cmbitems2">
<option value="flow">flow</option>
<option value="green">green</option>
<option value="red">red</option>
</select> 

</td>
</tr>
</table>

<script type="text/javascript">

// script for left side menu
var select = document.getElementById('cmbitems'),
input = document.getElementById('txtname');

select.onchange = function() {
input.value = select.value;
}


// script for right side menu
var select2 = document.getElementById('cmbitems2'),
input2 = document.getElementById('txtname2');

select2.onchange = function() {
input2.value = select2.value;
}

</script>
</body>
</html>

Thank you very much Manuel! This helped a lot. Although now, I am trying to have the two menus be functional. I got the one on the right to work but now the one on the left doesn't work anymore. You can see the result here (I cannot paste code in comments): [link](http://fabulousrice.com/external-file/menu-display11.html) — MicroMachine, May 07 '15 at 20:02
You must define different variable names, otherwise you overwrite the reference to the DOM elements. I edited the snippet, take a look. — Manuel Bitto, May 07 '15 at 21:20
This is great thank you! You solved this! I thought I could have coded this alone but your help was invaluable! Thanks! — MicroMachine, May 07 '15 at 22:44

How to display the value of a drop down menu somewhere else on a page?

3 Answers3