HTMLのoptionで1か所だけonClickを無効にする方法

optionで一か所だけonClickを実行しないようにしたいのですがうまく動作しません

<option value="0">レディース</option> 上記のコードの部分のみ選択してもonClickを実行しないようにしたいです..

色々調べてみたのですがうまくいかず...

html
1
2<form method="POST" name="selectOption"  action="../../search.php/main/searchCategory.php">
3<select name="categoryWomen" onclick="optionSelected()">
4<option value="0">レディース</option>   <=====ここだけ選択してもonClickを実行しないようにしたいです
5<option value="トップス">トップス</option>
6<option value="ジャケット・アウター">ジャケット・アウター</option>
7<option value="パンツ">パンツ</option>
8<option value="スカート">スカート</option>
9<option value="ワンピース" >ワンピース</option>
10<option value="靴・靴下">靴・靴下</option>
11<option value="ルームウェア・パジャマ">ルームウェア・パジャマ</option>
12<option value="帽子">帽子</option>
13<option value="バック">バック</option>
14<option value="アクセサリー">アクセサリー</option>
15<option value="小物">小物</option>
16<option value="時計">時計</option>
17<option value="ウィッグ・エクステ">ウィッグ・エクステ</option>
18<option value="水着・浴衣">水着・浴衣</option>
19<option value="スーツ・ドレス">スーツ・ドレス</option>
20<option value="マタニティ">マタニティ</option>
21<option value="その他">その他</option>
22</select>
23</form>
24
25

javascript
1<script>
2
3function optionSelected(){
4    document.selectOption.submit();
5
6}
7
8</script>

maisumakun

2020/08/23 03:37

「リストには表示するけど選択させたくない」のでしょうか？「選択はできるけどJavaScriptだけ実行したくない」のでしょうか？

nguyenseiji

2020/08/23 03:38

はい選択はできるけどjavascriptの関数を呼び出したくないです

行動規範の内容に同意します

回答3件

click じゃなくて、change じゃないのって思う。

html
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Sample</title>
6</head>
7<body>
8<form action="">
9    <select id="selectbox">
10        <option value="0">0</option>
11        <option value="1">1</option>
12        <option value="2">2</option>
13        <option value="3">3</option>
14        <option value="4">4</option>
15        <option value="5">5</option>
16    </select>
17</form>
18<script>
19    const select = document.getElementById('selectbox');
20    select.addEventListener('change', function (e) {
21        if (this.value > 0) {
22            alert(this.value);
23        }
24    });
25</script>
26</body>
27</html>

投稿2020/08/23 03:49

phper.k

総合スコア3923

退会済みユーザー

2020/08/23 03:53

JavaScript イベント一覧【HTMLリファレンス】 https://web-designer.cman.jp/javascript_ref/event_list/ によると、onchangeがふさわしいようですね。

phper.k

2020/08/23 03:55

select の場合、click でイベントとると、option を選択する前にイベントが発生しますからね。

nguyenseiji

2020/08/23 04:21

そうだったんですね！ありがとうございます

行動規範の内容に同意します

上記のコードの部分のみ選択してもonClickを実行しないようにしたいです..

そのようなことはできません。呼び出されたoptionSelectedの側で、「これが選択されたら何もしない」というようにするしかありません。

投稿2020/08/23 03:41

maisumakun

総合スコア145208

ベストアンサー

html
1<select name="categoryWomen" onchange="optionSelected(this.value)">

などとしてイベント処理関数にselectのvalueを引き渡すようにし、
ifでもなんでも条件分岐を入れればいいのではないかと。
onchangeはinputやselectやtextareaに使える、
要素のvalueが変更になったときに発生するイベントです。
参考：JavaScript イベント一覧【HTMLリファレンス】

ちなみに、本件の主旨とずれるかもしれませんが、特定のoptionを選択できなくするには

html
1<option value="0" disabled>レディース</option>

とすると表示はされても選択できなくなるとのこと。

参考：<OPTION>－HTMLタグリファレンス

投稿2020/08/23 03:37

編集2020/08/23 03:55

退会済みユーザー

総合スコア0

nguyenseiji

2020/08/23 03:43

返信ありがとうございます。カテゴリ機能を作成していて大項目である『レディース』は選択できるけどなにも関数が実行されないようにしてそのほかのoptionを選択したらjsの関数でformのsubmit()を自動で実行してくれるようにしたいのです...

退会済みユーザー

2020/08/23 03:48

optionSelected()に選択中の値が渡るようにして、その関数内でif()とかで条件分岐すればいいでしょ。 function optionSelected(value) { if (value != 0) { 本来の処理 } } optionSelected()に手を加えられない事情でもあるのですか？

nguyenseiji

2020/08/23 04:21

天才ですねありがとうございます if文を使用して無事できました

行動規範の内容に同意します

あなたの回答