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

Question

我遇到一些选项问题，有人可以帮我吗？ 我有一个按钮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(){ 
 
\t \t if ($("#colorSelect").click().val("1"){ 
 
\t \t \t $("#testButton").css("color", "red"); 
 
\t \t } 
 
\t }); 
 
});

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

但它OFC不工作:(

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

尝试以下方法：。

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

<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> 
 
<input type="button" id="testButton" value="Test Button"/>