Return text value from multiple drop down menus

Question

I would like to return the value of a drop down select box into a text input. Currently, I can modify only the first text box with the drop down selection. Please see the working example on JSFiddle below.

HTML::

    <select id="select1">
<option value="foo">foo</option>
<option value="bar">bar</option>
</select>
<input type="text" id="remap" name="out[]" />
<br />
<select id="select1">
<option value="foo">foo</option>
<option value="bar">bar</option>
</select>
<input type="text" id="remap" name="out[]" />

JQuery::

$(document).ready(function(){ $(function(){ $('select[id^=dropdown_]:not(.ui-dropdown_)').live('change', function(){ var Data = $(this).val(); $('#remap_value').val(Data); }) }); });

Example: JS Fiddle

That's because ID's are unique, and javascript expects there to be only one single element with the ID #select1, and only gets the first one. — adeneo
– adeneo, Commented May 22, 2013 at 21:50
Apologies, this is my first post to stack overflow. On the jsfiddle i have unique ID's --> <select name="select" id="dropdown_1"> — user2411254
– user2411254, Commented May 22, 2013 at 21:51

PlantTheIdea · Accepted Answer · 2013-05-22 22:06:55Z

1

Your HTML was invalid, even in your jsFiddle. Your IDs were not unique for your inputs.

But to make it work, first I changed the IDs of the inputs to be unique and gave each select a class:

<select name="select" id="dropdown_1" class="Dropdown">
    ...
</select>
<input type="text" id="remap_value1" name="out[]" />
<br />
<select name="select" id="dropdown_2" class="Dropdown">
    ...
</select>
<input type="text" id="remap_value2" name="out[]" />

This will make the selector in jQuery to be much more efficient than the convoluted CSS-based selector you currently have.

Then I modded the jQuery to be hyper-efficient:

$(function(){
    $('.Dropdown').on('change', function(){
        $(this).next().val($(this).val());
    })
});

To quickly explain the changes to the jQuery:

you were double-encapsulating your jQuery, $(function(){ is shorthand for $(document).ready({function(){
I made use of .on() instead of .live(), as live is now deprecated
I accessed the class Dropdown I created to bind the change event
I used .next() to go to the next HTML element on the same level of the DOM tree as the select item that changed
I used $(this).val() when plugging in the new text value, avoiding unneeded variable caching

As you can see, with this method you don't even need to have IDs for the inputs that follow, unless you were accessing them for another purpose.

If you were worried about conflicts with another dropdown, you could easily incorporate .not() into the selector:

$(function(){
    $('.Dropdown').not('.ui-dropdown_').on('change', function(){
        $(this).next().val($(this).val());
    })
});

This is actually the preferred use of not instead of the CSS usage, per the jQuery documentation.

jsFiddle to show changes and working example

edited May 22, 2013 at 22:06

answered May 22, 2013 at 21:55

PlantTheIdea

16.4k5 gold badges37 silver badges40 bronze badges

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

2 Comments

user2411254 Over a year ago

Once more... Thanks Again! It is sometimes tough learning from books and web sites.

PlantTheIdea Over a year ago

That's why I tried to provide more context instead of just an answer. I figured more information about why it worked would help with future coding endeavors.

Derek · Accepted Answer · 2013-05-22 21:54:28Z

1

You can use .next() to select the proper input.

$(document).ready(function(){
$(function(){
    $('select[id^=dropdown_]:not(.ui-dropdown_)').live('change', function(){
        $(this).next('.remap_value').val($(this).val());
    })
  });
});

Edit: You should use class instead of ID for remap_value, since it is invalid to have multiple elements with the same ID. My answer has also been updated for efficiency.

<input type="text" class="remap_value" name="out[]" />

answered May 22, 2013 at 21:54

Derek

3,4351 gold badge20 silver badges35 bronze badges

Collectives™ on Stack Overflow

Return text value from multiple drop down menus

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related