如何将选择框值更改设置为文本框颜色更改

Question

i want to Select box value change to textbox background color change

<select id="color">
     <option value="Black">Black</option>
     <option value="White">White</option>
     <option value="Blue">Blue</option>
     <option value="Green">Green</option>
     <option value="Orange">Orange</option>
</select>

<input type="text" name="color" value=""/>
<input type="text" name="amount" value=""/>

Answer 1

Not quite sure what you want, but try check this out :

HTML

<select id="color">
 <option value="Black">Black</option>
 <option value="White">White</option>
 <option value="Blue">Blue</option>
 <option value="Green">Green</option>
 <option value="Orange">Orange</option>
</select>

<input type="text" name="color" value="" id="textColor"/>
<input type="text" name="amount" value=""/>

JS

// use id color as a selector
// and register change event to it
$('#color').change(function(){
  $('[name="color"]').css('background',$(this).val()); 
  // if wanna change color for all input use below code
  // $('input').css('background',$(this).val());  
  // or reference it by id like below
  // $('#textColor').css('background',$(this).val()); 
});

DEMO

Check this link for references

1. https://api.jquery.com/change/
2. http://api.jquery.com/css/
3. http://jsfiddle.net/Lcqhpuoj/3 - Question's answer.

Answer 2

You can do it like :

Your HTML

<select id="color">
 <option value="Black">Black</option>
 <option value="White">White</option>
 <option value="Blue">Blue</option>
 <option value="Green">Green</option>
 <option value="Orange">Orange</option>

JS

$(document).ready(function(){
 $("#color").change(function(){
   var color=$(this).val();
   $("input[type=text]").css("background-color",color);
  });
});

Fiddle Demo

Answer 3

Just try with the JQuery:

<select id="color">
     <option value="Black">Black</option>
     <option value="White">White</option>
     <option value="Blue">Blue</option>
     <option value="Green">Green</option>
     <option value="Orange">Orange</option>
</select>

<input type="text" name="color" value="" id = "text1"/>
<input type="text" name="amount" value="" id = "text2"/>
<script type="text/javascript">
  $(document).ready(function() {
$("select#yourSelect").change(function(){
$('#text1').val($(this).val());
$('#text2').val($(this).val());
});
</script>