web-dev-qa-db-ja.com

すべてのブラウザーで適切に機能するすべてのオプションについて、異なる背景色でhtmlを選択しますか？

オプションごとにカスタムの背景色を使用して、複数のhtmlselect要素を作成しようとしています。

<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サイトが読み込まれたときに、select要素に背景色のみを表示し、選択したオプションのテキストは表示しないようにしたいと思います。テキスト（白、赤、....）は、ドロップダウンが開いているときにのみ表示されます。

選択した値がユーザーによって変更されると、背景色も変更され、テキストは閉じたドロップダウンに表示されなくなります。

このソリューションがIE 9/10を含むほとんどのブラウザーで機能するのであれば、本当に素晴らしいでしょう。

乾杯。

javascriptjqueryhtmlcssselect
8
Jagtar

このコードを試して、IEを含むすべてのブラウザーで動作します。

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}

js

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 :)

9
Singh
   <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>
0
Katyoshah

これは@Singhとほとんど同じですが、少し柔軟にするためにいくつかの小さな変更が加えられており、複数の選択で色を変更できます。

[〜＃〜] 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>

[〜＃〜] js [〜＃〜]

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

次の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>
0
AgeDeO