0

これは簡単なはずですが、<select>オブジェクトの制限はかなり苛立たしいものです。4つのオプションがある選択ボックスがあります。ページに移動すると、そのオプションは現在のページに設定されます。同じオプションを選択することで、つまり、すでに選択されているオプションを選択することで、ユーザーがページを更新できるようにしたいと思います。

残念ながら、このonclickイベントはブラウザ間では機能しません。ほとんどの人はを使用することをお勧めしonchangeますが、私が話している場合、それは機能しません。私が取っているアプローチは、現在選択されているものを保持し、クリックしても何もしないアイテムを上部に追加し、onchangeイベントを発生させた後にそのオプションに切り替えて、ユーザーがオプションを再選択したときに行うことです。彼らは実際に変化しています。ドロップダウンには同じアイテムが2つあり、それを行う必要はないので、それは厄介です。

この問題を解決するための優れたクロスブラウザの方法は何ですか？それほど複雑ではなく、通常のJavaScriptの何かが望ましいでしょう。

4

2 に答える 2

0

これは役立つかもしれません：

function onFocus(element){
    element.setAttribute('old-value',element.value);
    element.value='';
    console.log('reset');
}

function onBlur(element){
    if(element.value=='')
        element.value = element.getAttribute('old-value');
    element.removeAttribute('old-value');   
}

function onChange(element){
    console.log('New Value : '+ element.value);
}
<select id="mySelect"  onfocus="onFocus(this)" onchange="onChange(this)" onblur="onBlur(this);">
    <option value="" style="display:none;"></option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
</select>

于 2012-12-07T17:08:06.523 に答える
-1

では、解決策をどうぞ

$("select[id=mySelect] option").click(function(){
    alert("HI");
});

これにより、オプションをクリックするたびに -HI- が警告されます。セレクトボックスにも変更が加えられており、イベントも行われています。

于 2012-12-07T20:26:38.930 に答える