使用选项更改按钮的文本颜色答案

【问题标题】：Change the text color of a button with an option使用选项更改按钮的文本颜色
【发布时间】：2017-03-07 16:23:11
【问题描述】：

我有一些选项问题，有人可以帮助我吗？我有一个 id="colorButton" 的按钮，但我不知道如何使用选项更改他的颜色。

<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</form>

它可以是一个 javascript 答案，jquery...请 :( 我在脚本中有这个：

$(document).ready(function(){
		if ($("#colorSelect").click().val("1"){
			$("#testButton").css("color", "red");
		}
	});
});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

但是ofc它不起作用:(

【问题讨论】：

if ($("#colorSelect").click().val("1")){
不要使用 if 语句，将更改处理程序绑定到您的选项元素。另外，您说您的按钮的 ID 为 colorButton，但在您的示例中，您使用了 $("#testButton")

标签： javascript jquery select button option

【解决方案1】：

您的代码包含很多错误，您只需要绑定一个更改事件处理程序并根据所选选项设置颜色。

$(document).ready(function() {
  $("#colorSelect").change(function() {
    $("#testButton").css("color", $(':selected', this).text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="colorSelect">  
<option selected disabled>Text-Align : </option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</form>

<div id="testButton">button</div>

【讨论】：

【解决方案2】：

你需要像这样绑定到select的change事件：

$(document).ready(function() {
  $("#colorSelect").change(function() {
    if ($(this).val() == 1) $("#testButton").css("color", "red");
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</form>
<button id="testButton">button</button>

【讨论】：

【解决方案3】：

每个人都致力于使您的code 发挥作用。我努力以不同的方式解决您的问题。

每个option 都有data-color 属性。当您更改下拉菜单时，选择选项的 data-color 值会被选中并更改颜色。这样，您就不需要多个 if-else。

$(document).ready(function() {
  $('#colorSelect').on('change', function(){
    var color = $(this).find(':selected').data('color');
    $("#testButton").css("color", color);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="colorSelect">
    <option selected disabled>Text-Align : </option>
    <option data-color='red'>Red</option>
    <option data-color='blue'>Blue</option>
    <option data-color='green'>Green</option>
  </select>
  <button id="testButton">button</button>
</form>

【讨论】：