各プルダウンによって背景を変更したい！
しかし、同じクラスでまとめられていてどのように変更したらいいのかわからないことがありました。
同じクラスでも、各プルダウンによって背景を変更する方法を書きたいと思います。
・今回は医療のプルダウンリスト
医者、看護師、放射線技師の背景色を変更していきたいと思います。
※IT、建築は同じ動作をします。
実装
同じクラスの内に違うプルダウンが存在しると過程して実装していきます。
index.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="select.css"><title>Document</title></head><body><tableborder="1"><tr><th>医療</th><th>IT</th><th>建築</th></tr><tr><tdclass="select-area"><divclass="wrap"><divclass="value">選択してください</div><selectsize="4"name="a"class="select"><optionvalue="">選択してください</option><optionvalue="1">医者</option><optionvalue="2">看護師</option><optionvalue="3">放射線技師</option></select></div></td><tdclass="select-area"><divclass="wrap"><divclass="value">選択してください</div><selectsize="4"name="a"class="select"><optionvalue="">選択してください</option><optionvalue="1">選択肢１</option><optionvalue="2">選択肢２</option><optionvalue="3">選択肢３</option></select></div></td><tdclass="select-area"><divclass="wrap"><divclass="value">選択してください</div><selectsize="4"name="a"class="select"><optionvalue="">選択してください</option><optionvalue="1">選択肢１</option><optionvalue="2">選択肢２</option><optionvalue="3">選択肢３</option></select></div></td></tr></table><script src="https://code.jquery.com/jquery-3.3.1.js"></script><script src="select.js"></script></body></html>select.css
.op0:hover{background-color:rgb(236,30,30);}.op1:hover{background-color:rgb(224,24,157);}.op2:hover{background-color:rgb(32,205,218);}select.js
$(function(){//wrapクラスにexample0クラスまたはexample1クラス追加$(".select-area").find(".wrap").eq(0).addClass("example0");$(".select-area").find(".wrap").eq(1).addClass("example1");$(".select-area").find(".wrap").eq(2).addClass("example1");//example0の中にあるvalueクラスにhospitalクラスを追加$(".example0 .value").addClass("hospital");//example0の中にあるvalueクラスにvalue1クラスを追加$(".example1 .value").addClass("value1");//「選択してください」に触れた時に着火//example1クラスの場合$(".example1").find("select").hide();$(".example1").hover(function(){$(".example1").find("select").show();},function(){$(".example1").find("select").hide();});//プルダウンで選んだ値をvalueクラスに表示$(".example1").find("select").click(function(){$(".value1").html($('.example1').find("option:selected").text());$(".example1").find("select").hide();});//example0クラスの場合$(".example0").find("select").hide();$(".example0").hover(function(){$(".example0").find("select").show();},function(){$(".example0").find("select").hide();});//プルダウンで選んだ値をhospitalクラスに表示$(".example0").find("select").click(function(){$(".hospital").html($('.example0').find("option:selected").text());$(".example0").find("select").hide();});//optionにクラスを追加$(".select").children().each(function(){if($(".select").children('option:contains("医者")')){$(".select").children('option:contains("医者")').addClass("op0");}if($(".select").children('option:contains("看護師")')){$(".select").children('option:contains("看護師")').addClass("op1");}if($(".select").children('option:contains("放射線技師")')){$(".select").children('option:contains("放射線技師")').addClass("op2");}});});このようにすることで医療の項目のプルダウンの背景色は値によって変化すると思います。
実装イメージとしては簡単に言うと
変化させたいプルダウンの場所にクラスを追加し、cssで色をつけていく。