同じクラスのプルダウンリスト：値によって背景変更する方法

各プルダウンによって背景を変更したい！
しかし、同じクラスでまとめられていてどのように変更したらいいのかわからないことがありました。

同じクラスでも、各プルダウンによって背景を変更する方法を書きたいと思います。

![ev004.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700700/3fe51706-f87d-3a85-cc79-334dcad2b4fc.jpeg)

・今回は医療のプルダウンリスト
医者、看護師、放射線技師の背景色を変更していきたいと思います。
※IT、建築は同じ動作をします。

#実装
同じクラスの内に違うプルダウンが存在しると過程して実装していきます。

```html:index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="select.css">
    <title>Document</title>
</head>

<body>
    <table border="1">
        <tr>
            <th>医療</th>
            <th>IT</th>
            <th>建築</th>
        </tr>
        <tr>
            <td class="select-area">
                <div class="wrap">
                    <div class="value">選択してください</div>
                    <select size="4" name="a" class="select">
                        <option value="">選択してください</option>
                        <option value="1">医者</option>
                        <option value="2">看護師</option>
                        <option value="3">放射線技師</option>
                    </select>
                </div>
            </td>
            <td class="select-area">
                <div class="wrap">
                    <div class="value">選択してください</div>
                    <select size="4" name="a" class="select">
                        <option value="">選択してください</option>
                        <option value="1">選択肢１</option>
                        <option value="2">選択肢２</option>
                        <option value="3">選択肢３</option>
                    </select>
                </div>
            </td>
            <td class="select-area">
                <div class="wrap">
                    <div class="value">選択してください</div>
                    <select size="4" name="a" class="select">
                        <option value="">選択してください</option>
                        <option value="1">選択肢１</option>
                        <option value="2">選択肢２</option>
                        <option value="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>
```

```css: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);
}
```
```javascript: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で色をつけていく。