オプションのボタンのテキストの色を変更する

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