Sadece seçilen seçeneğin rengini değiştirin

Question

Tablo hücresinde bir selektör var. Tablo satırında bir renk var, bu yüzden CSS kullanarak, açılır menünün arka planını background-color:inherit; kullanarak aynı renge dönüştürebilirim. Bununla birlikte, tüm seçenekler ile kutunun rengini değiştirir.

Seçilen seçeneğin rengini, yalnızca jQuery'nin yardımıyla CSS'de değilse değiştirmek mümkün müdür?

Answer 1

herşey Bunu denemek gerekir :) jQuery ile mümkündür:

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

Ve burada bir live demo

olduğunu

Umut bu yardımcı olur!

Answer 2

Bunu jQuery ile yapabilmeniz gerekir. Ben (David Thomas'ın yorumunu bakınız) yanlış olabilir, ama deneyebilirsiniz:

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

Answer 3

Önce SELECT öğesinin arka plan rengini istediğim şekilde ayarlayarak, tüm seçenekler o renkle sonuçlandı. Sonra tüm seçenekleri belirli bir renk şeması yaptım. Son olarak, seçilen seçeneği SELECT öğesine aynı renk şemasında yaptım, böylece seçenek açılır listede aynı rengi gösterir.

$.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'); 
});