Question

我正在尝试使用类t1设置文本的颜色，颜色值取决于所选的选项。这是我必须要做的代码：

$('#colour').on('change', function(){
 $('.t1').css('color', ':selected").val()');
});

  <select id="colour">
  <option value="black">Black</option>
  <option value="blue">Blue</option>
  <option value="pink">Pink</option>
</select>

即使我尝试使用这样的东西也行不通：

$('#colour').on('change', function(){
 $('.t1').css('color', 'red');
});

Answer 1

我建议您抓住select-box .val()功能的当前选择。

this关键字是指select-box，val()功能显示实际选择。

$('#colour').on('change', function() {
  $('.t1').css('background', $(this).val());
});

.t1 {
  height: 100px;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colour">
  <option value="black">Black</option>
  <option value="blue">Blue</option>
  <option value="pink">Pink</option>
</select>

<div class='t1'></div>

Answer 2

在表单字段的事件处理程序回调中，this引用该字段。因此$(this).val()为您提供了值：

＆＃13;

$('#colour').on('change', function() {
  $('.t1').css('color', $(this).val());
});

＆＃13;

<select id="colour">
  <option value="black">Black</option>
  <option value="blue">Blue</option>
  <option value="pink">Pink</option>
</select>
<div class="t1">I'm a t1</div>
<div class="t1">So am I</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 3

将代码添加到HTML的onchange事件时，它正常工作。

function onchangeevent(){
	$('.t1').css('color', 'red');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colour" onchange="onchangeevent()">
  <option value="black">Black</option>
  <option value="blue">Blue</option>
  <option value="pink">Pink</option>
</select>
<div class="t1">
text
</div>

根据输入类型“选择”

3 个答案: