Question

我想选择框值更改为文本框背景颜色更改

<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

不太确定你想要什么，但请尝试检查一下：

<强> 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

点击此链接以获取参考资料

Answer 2

你可以这样做：

您的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

试试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>

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

3 个答案: