使用選項更改按鈕的文本顏色

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