Question

我有一些选项问题，有人可以帮助我吗？我有一个id =＆＃34; colorButton＆＃34;但我不知道如何通过选项改变他的颜色。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

但是它不起作用:(

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

Answer 2

您需要绑定选择的更改事件，如：

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

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

Answer 4

使用UnitFormat：

尝试以下操作

＆＃13;

change()

＆＃13;

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

＆＃13;

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

4 个答案: