चयनित विकल्प का रंग बदलें केवल

Question

मेरे पास एक टेबल सेल में बैठे चयनकर्ता हैं। तालिका पंक्ति में रंग होता है, इसलिए सीएसएस का उपयोग करके मैं background-color:inherit; का उपयोग कर ड्रॉप-डाउन की पृष्ठभूमि को उसी रंग में बदल सकता हूं, हालांकि, यह सभी विकल्पों के साथ पूरे बॉक्स का रंग बदलता है।

क्या केवल चयनित विकल्प का रंग बदलना संभव है, अगर jQuery के साथ शायद सीएसएस के साथ नहीं है?

Answer 1

सब कुछ jQuery के साथ :) आप इस प्रयास करना चाहिए संभव है:

$('.mySelect').change(function() { 
    $(this).find('option').css('background-color', 'transparent'); 
    $(this).find('option:selected').css('background-color', 'red'); 
}).trigger('change'); 

और यहाँ एक live demo

है

उम्मीद है कि मदद करता है!

Answer 2

आपको jQuery के साथ ऐसा करने में सक्षम होना चाहिए। मैं गलत हो सकता है (देखें डेविड थॉमस 'टिप्पणी), लेकिन कोशिश:

$("option[value='myValue']").css('background-color', 'red'); 

Answer 3

मैं इसे SELECT तत्व के पृष्ठभूमि रंग को पहले सेट करके करने में सक्षम था जिसके परिणामस्वरूप मैं सभी रंगों को रंग देता था। तब मैंने सभी विकल्पों को एक विशिष्ट रंग योजना बनाई। आखिरकार मैंने चयनित विकल्प को एक ही रंग योजना को चयन तत्व के रूप में चुना ताकि विकल्प ड्रॉप डाउन सूची में एक ही रंग दिखाता हो।

$.each($('select'), function(i,v) { 

    theElement = $(v); 
    theID = theElement.attr('id'); 

    // Set the SELECT input element to green background with white text 

    theElement.css('background-color', 'green'); 
    theElement.css('color', 'white'); 

    // Set all the options to another color (note transparant will show the green) 

    $('#'+theID).find('option').css('background-color', 'white'); 
    $('#'+theID).find('option').css('color', 'black'); 

    // Finally set the selected option to the same values as the SELECT element 

    $('#'+theID).find('option:selected').css('background-color', 'green'); 
    $('#'+theID).find('option:selected').css('color', 'white'); 
});