セレクトボックス選択と当時に、指定クラスの色を変える方法

Question

選択された値に応じて、指定した場所の色を変える機能がほしくてあれこれ模索しています。

次のようなイメージですが、さっぱり動いてくれません。
https://jsfiddle.net/vL5Lmmtc/

<select class="select_color" name="onamae" data-required="no" data-type="select">
<option value="blue">ブルー</option>
<option value="red">レッド</option>
<option value="green">グリーン</option>
</select>
<div class="change">色よ変われ！</div>

<sctipt>
$('select').change(function(){
var num = document.onamae.selectedIndex;
var str = document.onamae.options[num].value;
document.getElementsByClassName("change")[0].css('background','str')
});
</script>

または下記のように書けば１回は変更できるのですけれど、それじゃダメなのです。
https://jsfiddle.net/23fgea8L/

<sctipt>
$('select').change(function(){
$(".change").css('background-color','#f00')
});
</script>

お詳しい方、ご教示頂けませんでしょうか。。
宜しくお願い致します。

Answer 1

元々がclassで色付けする仕様であればcss()メソッドで色を変えるより
クラスを付け替えるほうがよいのでは？

.red{  background-Color: red;}
.blue{  background-Color: blue;}
.green{  background-Color:green;}
.change {
  color: #fff;
  font-weight: bold;
  width: 100px;
  margin: 20px;
}

$(function(){
  $('select').on('change',function(){
    $('.change').removeClass('red blue green').addClass($(this).val());
  });
});

<select class="select_color" name="onamae" data-required="no" data-type="select">
<option value="blue">ブルー</option>
<option value="red">レッド</option>
<option value="green">グリーン</option>
</select>
<div class="change blue">色よ変われ！</div>

追記

.kokomo:beforeの色を変える

.red{  background-Color: red;}
.blue{  background-Color: blue;}
.green{  background-Color:green;}
.beforered:before{background-Color: red;}
.beforeblue:before{  background-Color: blue;}
.beforegreen:before{  background-Color:green;}

.box {margin: 20px;}
.change {
  color: #fff;
  font-weight: bold;
  width: 200px;
  margin: 20px;
}
.kokomo {
  color: #000000;
  margin: 20px;
  font-weight: bold;
}
.kokomo:before {
content: '';
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

$(function(){
  $('select').on('change',function(){
    $('.change').removeClass('red blue green').addClass($(this).val());
    $('.kokomo').removeClass('beforered beforeblue beforegreen').addClass("before"+$(this).val());
  });
});

<div class="box">
<select class="select_color" name="onamae" data-required="no" data-type="select">
<option value="blue">ブルー</option>
<option value="red">レッド</option>
<option value="green">グリーン</option>
</select>
</div>

<div class="change blue">ここの色が変わる！</div>
<div class="kokomo beforeblue">ここも</div>

Comments

[退会済みユーザー]

ありがとうございます。クラス変えの方が軽いのですね！感謝です。

ところで、追加で申し訳ございません。
beforeにだけ色を付けている場合、どうすればよろしいでしょうか？
このようなケースです。
https://jsfiddle.net/10ub0j58/

「kokomo」は「kokomo::before」にだけ色を変えたいのですけれど、今回の書き方だと「kokomo」も変わってしまうので、苦戦中です。。

[yambejp]

クラスの指定を変えないとだめでしょうね
kokomoにblueとか付けるとkokomo自体に色がつくので
ほんたいに影響のないクラスを設定してあげる必要があるでしょう

[退会済みユーザー]

「ザ★感無量」でございます。。
そこを変えるのですね。まったく発想できませんでした。
どうもありがとうございます!!
金曜日もあと少し♪どうぞよい週末をお過ごしください(*´ω｀)

Answer 2

jQuery使うなら以下。

$('select').change(function(){
// jQueryは基本この関数内の[this]はイベントが起こった要素。
// この場合は、[select]要素
// ※アロー関数の場合は別。
// selectのvalue すなわち現在選択されている select内のoption要素のvalue値を
// .changeを持つ要素のインラインスタイル[background-color]に設定する。
// スタイル変更はコスト高いので、addClass等クラス名付与の方が若干
$(".change").css('background-color',this.value)
});

ただ、これだとjQueryが走った以降出てきた、追加されたselect要素は考慮されないし
全てのselect要素にイベント（処理）がついてしまう。
また、[.change]が複数ある場合は、そのすべてが変更されてしまう。

以下なぜ悪いかの理由

$('select').change(function(){
//　これだと毎回 .changeの値が '#f00'に設定されてしまう。すなわち赤色
$(".change").css('background-color','#f00')
});

$('select').change(function(){
// form内にあるわけではないのでname指定ができない
var num = document.onamae.selectedIndex;
// 上記で取得できてないので。
var str = document.onamae.options[num].value;
// 根本的な問題として、Elementには css というメソッドはない
// jQuery利用で.changeを取得したと仮定して、ここで変数 str　ではなく　文字列 str 
// を用いているので、backgroundにstrという文字をあては
document.getElementsByClassName("change")[0].css('background','str')
});

Comments

[退会済みユーザー]

「スタイル変更」はコスト高いのですね。ご指摘感謝です。

今回はそのご指摘に沿ってご回答くださったyambejpさんをベストアンサーにさせて頂きました。
（kanimaruさんは私の質問にあった「スタイル変更」にせっかくお応え下さったのに、すみません。笑）

コードの上に説明書いてくれて嬉しいです。ありがとうございます！

Answer 3

jQueryをお使いのようですので…　$('select').val() で選択中のvalueが取得できます。

$('select').change(function(){
  var color = $(this).val();
  $(".change").css('background-color', color);
});

Comments

[退会済みユーザー]

ありがとうございます。
私の質問では「スタイル変更」を求めておりますくせに恐縮なのですけれど、今回はより軽快であるらしい「クラス変更」の方法をご提示くださった方がいらしたので、ベストアンサーは譲ってあげてくださいませ。<(_ _)>
ベストアンサーの代わりに「１番すばやいで賞」を進呈します★笑