css - Change color in drop-down where jquery change multiply drop-down-menu -
css - Change color in drop-down where jquery change multiply drop-down-menu -
i utilize jquery alter multiply drop-down-menus 1 selection. , utilize 1 drop-down-menu alter others.
i added diffrent background color each option. , when alter alternative on drop-down-menu contral them backround color won't displayed on other drop-down-menus.
how can achive this?
heres jquery
function addmessage(msg, clear){ if (clear !== null && clear) { $('#msgs').html(""); } $('#msgs').append(msg+"<br/>"); } function onselectchange(){ var stext = $("#s_make option:selected").val(); addmessage("you selected: " + stext); switch (stext) { case "opt_1": $("#s_score > option[value='xml_multi_01.php']").attr('selected','selected'); break; case "opt_2": $("#s_score > option[value='xml_multi_02.php']").attr('selected','selected'); break; case "opt_3": $("#s_score > option[value='xml_multi_03.php']").attr('selected','selected'); break; case "opt_4": $("#s_score > option[value='xml_multi_04.php']").attr('selected','selected'); break; } } function init(){ addmessage("init()<br/>"); $("#s_make").change(onselectchange); } // maintain if using jquery $(document).ready(init);
and heres html
<select id='s_make' onchange="this.style.backgroundcolor=this.options[this.selectedindex].style.backgroundcolor"> <option value='--' style="background: #ffffff;">change options to... </option> <option value='opt_1' style="background: #bfe29c;">option 1</option> <option value='opt_2' style="background: #9cc474;">option 2</option> <option value='opt_3' style="background: #b6dafb;">option 3</option> <option value='opt_4' style="background: #6cace8;">option 4</option> </select>
option 1option 2option 3option 4
option 1option 2option 3option 4
take @ jsfiddle , propably see mean: http://jsfiddle.net/mqw9c88d/
there number ways of achieving that, illustration can update color of other select
's 1 time changed 'main' select:
function onselectchange(){ $("#s_score").css('backgroundcolor', this.style.backgroundcolor); //other code... }
see partially working jsfiddle (it changes color of 2nd select because have same id 2nd , 3rd selects)
jquery css drop-down-menu selection options
Comments
Post a Comment