html seçin.

Ben her seçenek için özel arka plan renkleri ile birden html seçme elemanlarını oluşturmak için arıyorum

<select runat="server" id="select"> 
<option value="A">White</option> 
<option value="B">Red</option> 
<option value="C">Yellow</option> 
<option value="D">Green</option>

web yükler, sadece arka plan rengini ve hiçbir metni görüntülemek için seçme elemanı istiyorum Seçilen seçenek için. Metin (beyaz, kırmızı, ....) sadece açılır menü açılırken görünür olmalıdır.

Seçilen değer kullanıcı tarafından değiştirildiği için, arka plan rengi de değişmeli ve metin kapalı açılır menüde görünmez olmalıdır.

Çözüm, IE 9/10 dahil olmak üzere çoğu tarayıcıda çalışırsa çok güzel olurdu.

Şerefe.

kaynak

2013-05-13 Jagtar

de bakabilirsiniz Lütfen IE dahil her tarayıcıda çalışır:

html

<select id="select1" onchange="colourFunction()"> 
<option class="white" value="A">This should have a WHITE background</option> 
<option class="red" value="B">This should have a RED background</option> 
<option class="yellow" value="C">This should have a YELLOW background</option> 
<option class="green" value="D">This should have a GREEN background</option> 
</select>

css

#select1 {width:150px; color:rgba(0, 0, 0, 0);} 
#select1:focus, #select1:focus { 
color:black; 
} 
.white {background:white;} 
.red {background:red;} 
.yellow {background:yellow;} 
.green {background:green}

function colourFunction() { 
var myselect = document.getElementById("select1"), 
colour = myselect.options[myselect.selectedIndex].className; 
myselect.className = colour; 
myselect.blur(); //This just unselects the select list without having to click 
somewhere else on the page 
}

HTH :) Bu hemen hemen biraz daha esnek hale getirmek için bazı küçük değişikliklerle @Singh aynıdır

kaynak

2013-05-13 22:25:06 Singh

Çok teşekkürler - bu mükemmel çalışıyor! – Jagtar

hoş geldiniz :) – Singh

bu kodu deneyin aşağıdaki jsfiddle

http://jsfiddle.net/xt3xv/1/

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
</head> 
<body> 
<select runat="server" id="select"> 
    <option value="A" style="background-color: white;">White</option> 
    <option value="B" style="background-color: red;">Red</option> 
    <option value="C" style="background-color: yellow;">Yellow</option> 
    <option value="D" style="background-color: green;">Green</option> 
</select> 
<script> 
$('#select').change(function(){ 
     if($(this).val() == 'A'){ 
     $("body").css('background-color', 'white'); 
     } 
     if($(this).val() == 'B'){ 
     $("body").css('background-color', 'red'); 
     } 
     if($(this).val() == 'C'){ 
     $("body").css('background-color', 'yellow'); 
     } 
     if($(this).val() == 'D'){ 
     $("body").css('background-color', 'green'); 
     } 
    }); 
</script> 
</body> 
</html>

kaynak

2013-05-13 12:04:34 AgeDeO

<script> 

    function changecolor(id,color){ 

    id.style.backgroundColor=color; 


} 
    </script> 


    <div id="container"> 

    <p> Select Color to change background:</p> 


    <select id="themenu" onchange="changecolor(container,value)"> 
    <option value="white"> </option> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="green">GREEN</option> 
    </select> 


    </div>

kaynak

2013-12-26 10:06:56 Katyoshah

, birden çok olmasını sağlar Değişik renkleri seçer.

CSS

<style> 
    .red { 
     color: darkred; 
     background-color: red; 
    } 

    .purple { 
     color: darkmagenta; 
     background-color: magenta; 
    } 

    .yellow { 
     color: darkkhaki; 
     background-color: yellow; 
    } 

    .aqua { 
     color: mediumaquamarine; 
     background-color: aqua; 
    } 

    .blue { 
     color: lightblue; 
     background-color: blue; 
    } 

    .green { 
     color: lightgreen; 
     background-color: green; 
    } 
</style>

html

<select name="pos1" id="pos1" onchange="colourFunction(this)"> 
    <option disabled selected value>select</option> 
    <option class="red" value="1">Red</option> 
    <option class="purple" value="2">Purple</option> 
    <option class="yellow" value="3">Yellow</option> 
    <option class="aqua" value="4">Aqua</option> 
    <option class="blue" value="5">Blue</option> 
    <option class="green" value="6">Green</option> 
</select> 

<select name="pos2" id="pos2" onchange="colourFunction(this)"> 
    <option disabled selected value>select</option> 
    <option class="red" value="1">Red</option> 
    <option class="purple" value="2">Purple</option> 
    <option class="yellow" value="3">Yellow</option> 
    <option class="aqua" value="4">Aqua</option> 
    <option class="blue" value="5">Blue</option> 
    <option class="green" value="6">Green</option> 
</select>

<script> 
    function colourFunction(pos) { 
     pos.className = pos[pos.selectedIndex].className; 
     pos.blur(); 
    } 
</script>

kaynak

2016-08-18 05:44:04 Pete

cevap

İlgili konular