2015-08-28 78 views
-1

我想选择框的值更改为文本框的背景颜色变化如何设置选择框的值更改为文本框的颜色变化

<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=""/> 
+0

你可以添加一些更详细你的问题,如究竟你想达到的目标。你的问题目前没有任何意义。 –

+0

http://jsfiddle.net/Lcqhpuoj/3 UseFul This – Nilesh

回答

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

检查这个链接引用

  1. https://api.jquery.com/change/
  2. http://api.jquery.com/css/
  3. http://jsfiddle.net/Lcqhpuoj/3 - 问题的答案。
+0

欢迎您! –

+0

避免使用属性选择器,它们是最慢的之一。除了你可以使用id选择器,因为它是遍历dom最快的选择器。 https://jsperf.com/id-vs-class-vs-tag-selectors/2 – dreamweiver

+0

是的,只是想与OP发布的相关代码相关的真实例子。感谢您的提示。 –

0

你可以不喜欢它:

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

0

只是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>