バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

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

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
bio
投稿日時: 2019/7/23 7:24
対応状況: −−−
一人前
登録日: 2013/3/13
居住地:
投稿: 81
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
居住地:
投稿: 81
Re: htmlで選択後のselectボックスの枠の色を変更したいです。
Kazumi様、

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

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

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


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,301名です
総投稿数は109,692件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1568
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

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

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