2 に答える
注:コメントに基づいて、これはフォーカスイベントをリッスンする必要があることを前提としています。
解決策1-使用blur()
-Chromeでは効果的だがバグがある
理論的には、focus
イベントはキャンセルできないためreturn false
、event.preventDefault()
この場合は効果がありません。ただし、実際には、blur()
メソッドを使用してイベントを元に戻すことができます。
例えば:
$('#select-two').on('focus',function () {
if ($("#select-one").val() == "") {
$(this).blur();
alert('Fill select-one first!');
return false;
}
});
jsFiddleデモを見る
alert
これにより、呼び出し後にフィールドがフォーカスを取り戻すのを効果的に防ぐことができるため、focus
イベントが繰り返されることはありません。唯一の問題は、Chromeではフィールドがフォーカスされていなくても、ドロップダウンが開いたままになることです(デモを参照)。
解決策2-使用remove()
とclone()
-コストはかかるがクロスブラウザ
Chromeの動作に問題がある場合は、より大雑把なアプローチを取ることができます。これによりremove()
、select
DOMから取得し、DOMにclone()
再挿入します。これにより、要素が効果的に完全に「リセット」され、select
フォーカスがなく、閉じたままになります。
例えば:
$(document).on('focus','#select-two',function (e) {
if ($("#select-one").val() == "") {
$(this).remove().clone().insertAfter('#select-one');
alert('Fill select-one first!');
return false;
}
});
jsFiddleデモを見る
このアプローチの利点は、Chromeでもうまく機能することです。このアプローチの欠点は、非常に些細な問題でDOMを操作する必要があることです。
select-one の値が次のように "" の場合、コンテンツ select-two を変更する追加のイベントが必要だと思います。
HTML
<select id="select-one">
<option value="">Choose</option>
<option value="1">House</option>
</select>
<select id="select-two">
<option value="">Choose</option>
<option value="A">Table</option>
</select>
JS
$("#select-one").change(function() {
if ($(this).val() == "") {
$("#select-two").val("");
}
});
$("#select-two").focus(function() {
if( $("#select-one option:selected").val() == "" ) {
alert("Fill select-one first!");
$("#select-one").focus();
return false;
}
});