下記のようなソースを作りました。
<html>
<form>
<select id="TestSelect" name="drop02" onClick="alert('テスト');">
<option value="A" selected="selected">Ａ</option>
<option value="B">Ｂ</option>
<option value="C">Ｃ</option>
<option value="D">Ｄ</option>
<option value="E">Ｅ</option>
<option value="F">Ｆ</option>
</select>
</form>
<br>
<div onClick="alert('テスト');">onClick&alertテスト</div>
</html>
で、selectをクリックすると、selectのポップアップが表示されてその上に、alert画面が表示されます。
これをselectのポップアップを表示させずにalert画面だけを表示させたいのですが、何か良い方法はありませんでしょうか？（最終的にはfromでpostさせたいので、<ul>
<li>で選択して、valueとlabeleの値を保持して・inputのhideに値を設定して・・という面倒なことがしたくないと考えています。）
最終的には、selectをクリックしたら、ドラムみたいな選択UIを表示して選択をさせるという処理を実装したいと考えております。
方法が、ある・ない を含めて、ご指導頂ければ幸いです。
No.1
504
141
100pt
このような感じでデフォルトの動作をキャンセルできると思います。
28
27
<html>
<form>
<select id="TestSelect" name="drop02" >
（省略）
</select>
</form>
<br>
<script>
function handler(e) {
console.log("テスト");
e.preventDefault();
}
window.onload = function() {
var e = document.getElementById("TestSelect");
e.addEventListener("mousedown", handler, false);
e.addEventListener("touchstart", handler, false);
}
</script>
</html>
touchstart は touchend でも良いかもしれません。
ドラムみたいな選択UIで option のどれかを選択するのも、<li> で選択して hidden な input に値を入れるのも大差ないと思いますがｗ
No.1
504141
ここでベストアンサー
100pt
このような感じでデフォルトの動作をキャンセルできると思います。
<html>
<form>
<select id="TestSelect" name="drop02" >
（省略）
</select>
</form>
<br>
<script>
function handler(e) {
console.log("テスト");
e.preventDefault();
}
window.onload = function() {
var e = document.getElementById("TestSelect");
e.addEventListener("mousedown", handler, false);
e.addEventListener("touchstart", handler, false);
}
</script>
</html>
touchstart は touchend でも良いかもしれません。
ドラムみたいな選択UIで option のどれかを選択するのも、<li> で選択して hidden な input に値を入れるのも大差ないと思いますがｗ
ありがとうございます。
うまく動作させるしくいができそうです。
Lhankor_Mhy
2013/12/11 19:39:24
2
1
2
1
1
1
ありがとうございます。
2013/12/13 13:24:02うまく動作させるしくいができそうです。