バージョン選択

フォーラム

メニュー

オンライン状況

36 人のユーザが現在オンラインです。 (24 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 36
もっと...

サイト内検索

質問 > フロント機能 > htmlで選択後のselectボックスの枠の色を変更したいです。

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
bio
投稿日時: 2019/7/23 7:24
対応状況: −−−
一人前
登録日: 2013/3/13
居住地:
投稿: 75
htmlで選択後のselectボックスの枠の色を変更したいです。
いつもお世話になっております。eccube2系の諸々の設定を利用して、以下の例の様にPCサイトでラグビーと記載されているボックスをクリックすると、ラグビー関連の情報が表示される設定にしておりますが、その際(クリック後に)にラグビーと記載されているボックスの枠を目立つ色に変更したいです。

他にもある選択肢の中からラグビーがクリックされているということを示したいためですが、以下のjs、html、css、(あるいは他の何か)をどの様に設定することによりそれが可能になるかお教え願いませんでしょうか。

*js

//サブエリアの表示/非表示
var speed = 500;
var stateSub = 0;
function fnSubToggle(areaEl, imgEl) {
areaEl.slideToggle(speed);
if (stateSub == 0) {
$(imgEl).attr("src", "<!--{$TPL_URLPATH}-->img/button/btn_plus.png");
stateSub = 1;
} else {
$(imgEl).attr("src", "<!--{$TPL_URLPATH}-->img/button/btn_minus.png");
stateSub = 0;
}
}


*html

<input type="hidden" name="mode" value="search" />
<span class="b_expand"><p onclick="fnSubToggle($('#sub_area4'), this);">
<select name="europeid" class="box70"><option label="" value="">ラグビー</option></select>
</p></span>

<div id="sub_area4" style="display: none;">

<div class="subarea clearfix">
<div id="maintext10">

//ラグビーボックスをクリック後、ラグビー関連の情報が表示される。

</div>
</div>
</div>


*css

select.box70 {
width: 125px;
height:23px;

}



MySQL5.0.77
apache2
Windows XP
5.0.22
EC-CUBE 2.X系
kazumi
投稿日時: 2019/7/26 13:14
対応状況: −−−
常連
登録日: 2019/4/15
居住地:
投稿: 45
Re: htmlで選択後のselectボックスの枠の色を変更したいです。
@bio さん、初めまして。

Selectのオプションが変更された際に、そのイベントで選択された値が「ラグビー」などの場合に、Selectのスタイルを変更すれば、可能かと思います。

スタイルを変更しなくても、Optionの値に「ラグビー(選択中)」など変更をしていただく方法などもあると思います。

以下、ご参考になるかと思いますので、一度ご覧ください。

https://www.sejuku.net/blog/25060#onChange-6
https://copypet.jp/797/
bio
投稿日時: 2019/7/26 21:10
対応状況: −−−
一人前
登録日: 2013/3/13
居住地:
投稿: 75
Re: htmlで選択後のselectボックスの枠の色を変更したいです。
Kazumi様、

お時間を頂き、そして情報をご提供頂きまして本当に感謝いたします。

最初のスレッドで書き忘れていましたが、あらゆることを試した結果、上記の設定にて期待する結果を得られませんでした。

上記の設定にて、具体的にどのような設定にすれば期待する結果になるか、お分かりになるのであればお教え願いませんでしょうか。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBEペイメント

公式ストアEC-CUBE4系デザインテンプレート続々リリース中

統計情報

総メンバー数は64,462名です
総投稿数は97,263件です

投稿数ランキング

1
seasoft
7332
2
AMUAMU
2712
3
468
2494
4
nanasess
2089
5
umebius
1650
6
yuh
1612
7
red
1411
8
h_tanaka
1029
9
fukap
907
10
tsuji
863
11
shutta
835
12
tao_s
792
13 ramrun 789
14 karin 657
15 sumida 641
16
homan
633
17 DELIGHT 571
18
patapata
502
19
flealog
485
20 tonton 437


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.