JQuery to change value based on selection in a drop down menu

Question

Using JQuery I'm trying to create a drop-down menu and then change a certain value on a search input element based on what people select in the menu.

So far I've figured out how to target the value I need to change. I've also gotten as far as having it so that if someone makes any selection from the menu, it changes the search input value to one specific value:

<div> 
 <form action="setColor" method="post">
   <fieldset>
     <label for="color">Select A Color</label>
       <select name="color" id="color">
           <option>Blue</option>
           <option selected="selected">Red</option>
           <option>Yellow</option>
      </select>
   </fieldset>
  </form>
</div>


<script> 

  $(function() { 
   $('select[name="color"]').change(function() {
     $('input[name="ancestorId"]').val("9999");
   });
 });

</script>

What I need now is something that sets the value according to the menu selection, matched up something like this:

Blue = 9999
Red =  8888
Yellow = 7777

I'm still looking at examples and will keep trying, but kind of stuck. Any advice appreciated.

Where are these values going to come from? What does 9999 mean, 8888? Or are they just a representation? — jmore009
– jmore009, Commented Jan 9, 2015 at 3:16
Using this as raw material for the menu. jqueryui.com/selectmenu Will values help? — user3762977
– user3762977, Commented Jan 9, 2015 at 3:19
those are representations for what I want to insert, which are just longer numbers. — user3762977
– user3762977, Commented Jan 9, 2015 at 3:21

Cᴏʀʏ · Accepted Answer · 2015-01-09 03:24:16Z

You should put the value assignment in the option elements, as they were designed for just that:

<select name="color" id="color">
    <option value="9999">Blue</option>
    <option value="8888" selected="selected">Red</option>
    <option value="7777">Yellow</option>
</select>

And the script nearly stays the same, except I've used the elements IDs instead of their names in the selectors (assuming here your ancestor element has such an ID):

$(function() { 
    $('#color').change(function() {
         $('#ancestor').val($(this).val());
    }).change(); // Trigger the event
});

Note that the chained .change() call will trigger the change event that was just assigned, so that the pre-selected item's value will be populated into the text field when the page loads.

See it in action:

$(function() { 
    $('#color').change(function() {
         $('#ancestor').val($(this).val());
    }).change(); // Trigger the event
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="color" id="color">
    <option value="9999">Blue</option>
    <option value="8888" selected="selected">Red</option>
    <option value="7777">Yellow</option>
</select>

<input id="ancestor" type="text" />

Collectives™ on Stack Overflow

JQuery to change value based on selection in a drop down menu

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related