根據輸入類型“選擇”設置文本顏色

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

我建議您使用.val()函數捕獲當前選擇select-box的select-box 。

當val()函數顯示實際選擇內容時， this關鍵字引用select-box 。

 $('#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()為您提供值：

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

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

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>