質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1394閲覧

プルダウンメニューの一項目以外を選択時、特定の要素にclass属性を付与

vio

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/05/09 04:16

前提・実現したいこと

プルダウンメニューの一項目以外を選択した時、特定の要素にclassを付与したいです。
(申し込まない以外の選択肢を選んだ時、div要素(id="area")にclass="red"を付与)

jQueryは事前に読み込み済みです。

該当のソースコード

js

1$(function(){ 2 $("select_js").on('change', function(){ 3 var val = $(this).val(); 4 if ('申し込まない' == val) { 5 $('#area').removeAttr('class','red'); 6 } else { 7 $('#area').attr('class','red'); 8 } 9 }).change(); 10});

php

1<div id="area"> 2 <select name="商品1" id="select_js"> 3 <option value="">選択してください</option> 4 <option value="申し込まない">申し込まない</option> 5 <?php 6 for($i=1; $i<=5; $i++) { 7 ?><option value="<?php print $i; ?>"><?php print $i; ?></option><?php 8 ?><?php 9 } 10 ?> 11 </select> 12</div>

試したこと

上記の内容で試しましたが、classを付与することができませんでした。
記述の部分で間違えている部分がありましたら、ご指摘いただけますと幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

classの付加・削除はaddClass,removeClass,toggleClass
「選択してください(value="")」のときはどうするんでしょうね?

javascript

1<style> 2.red{background-Color:red} 3</style> 4<script> 5$(function(){ 6 $("#select_js").on('change', function(){ 7 var val = $(this).val(); 8 $('#area').toggleClass('red',$.inArray(val,["申し込まない",""])==-1); 9 }).trigger('change'); 10}); 11</script> 12<div id="area"> 13 <select name="商品1" id="select_js"> 14 <option value="">選択してください</option> 15 <option value="申し込まない">申し込まない</option> 16 <?php 17 for($i=1; $i<=5; $i++) { 18 ?><option value="<?php print $i; ?>"><?php print $i; ?></option><?php 19 ?><?php 20 } 21 ?> 22 </select> 23</div>

投稿2019/05/09 04:34

編集2019/05/09 05:57
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

vio

2019/05/09 04:40

ご回答ありがとうございます! 大変恐縮なのですが、 先にコメントいただいた方をベストアンサーにさせていただきました????‍♂️ inArrayを使用した書き方は初めて見たので、こちらの書き方も勉強させていただきます!
guest

0

ベストアンサー

js

1$(function(){ 2// $("select_js").on('change', function(){ 3// ↓ 4 $("#select_js").on('change', function(){ 5 var val = $(this).val(); 6 if ('申し込まない' == val) { 7 // $('#area').removeAttr('class','red'); 8 // ↓ 9 $('#area').removeClass('red'); 10 } else { 11 // $('#area').attr('class','red'); 12 // ↓ 13 $('#area').addClass('red'); 14 } 15 }).change(); 16});

【.addClass() | jQuery API Documentation】
https://api.jquery.com/addClass/

投稿2019/05/09 04:29

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

vio

2019/05/09 04:37

ありがとうございます! 問題が解決しました! attrではなく、addClassを使用するんですね。 URLまでご共有ありがとうございます。とても勉強になりました????‍♂️
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問