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

Popular posts from this blog

formatting - SAS SQL Datepart function returning odd values -

c++ - Apple Mach-O Linker Error(Duplicate Symbols For Architecture armv7) -

php - Yii 2: Unable to find a class into the extension 'yii2-admin' -