7

jQuery を使用して選択ボックスの値をリセットするのに問題があります。私のコードは次のとおりです。

HTML:

<form id="myform">
  <select name="myselect" id="myselect" value=""> 
    <option value="">Default</option>
    <option value="1">Option 1</option>
    <option value="2" selected>Option 2</option>
    <option value="3">Option 3</option>
  </select>  
  <input type="submit" value="Go">
  <input type="reset" class="reset" value="Reset form">  
</form>

Javascript:

​$("#myform .reset").click(function() {
    $('#myselect').attr('value','');
    alert($('#myselect').attr('value'));
});​

ご覧のとおり、オプション 2 が選択されていますが、選択ボックスを「デフォルト」にリセットしたいと考えています。attr->selectedIndex を含むさまざまな方法を試しましたが、すべて同じ効果があり、一時的にデフォルトに変更されます (「アラート ボックス」がポップアップしたときにフォームを見るとわかるように、アラート ボックスが表示されるとすぐにが閉じられるか、アラート行が削除されると、現在選択されているオプション 2 に戻ります。

これは jQuery のバグである可能性があると思います。1.6 からエッジまで、さまざまなバージョンを試しましたが、すべて同じ効果が得られました。

簡単にするために、jsfiddle を追加しました: http://jsfiddle.net/ux2f2/1/

これが私の最初の投稿なので、すべてが含まれていることを願っていますが、私は長年の読者です:) このサイトが大好きです!

4

4 に答える 4

7

この単純なフォームをリセットするのに JavaScript は必要ありません。(X)HTML で選択した属性を使用するだけです

<form id="myform">
  <select name="myselect" id="myselect" value=""> 
    <option selected="selected">Default</option>
    <option value="1">Option 1</option>
    <option value="2" selected>Option 2</option>
    <option value="3">Option 3</option>
  </select>  
  <input type="submit" value="Go">
  <input type="reset" class="reset" value="Reset form">  
</form>

本当に jQuery を使用したい場合は、次のようにすることができます。

$("#myform .reset").click(function() {
    $('#myselect').prop('selectedIndex', -1);
});

値「-1」は「リセット」を意味します

于 2012-10-22T13:16:35.970 に答える
2

Kolink が説明したように、「リセット」タイプの入力は、フォーム全体をデフォルト値にリセットするため、問題の原因です。

一番手っ取り早い解決方法は変えること

<input type="reset" class="reset" value="Reset form">

に

<input type="button" class="reset" value="Reset form">

または、入力の代わりにクリック可能なアンカーまたはdivをリセットのトリガーにするだけです

この方法では、jQuery に変更を加える必要はありません

于 2012-10-22T13:18:51.927 に答える
1

主な問題は、フォームをクリックしてアラートを表示した後、リセット ボタンがフォームをリセットしていることです。デフォルトのイベントをキャンセルする必要があります。ただし、バニラ JS を試すこともできます。

// add id="reset" to the reset button's HTML, then...
document.getElementById('reset').onclick = function() {
    mysel = document.getElementById('myselect');
    mysel.selectedIndex = 0;
    alert(mysel.value);
    return false;
}

更新されたフィドル

于 2012-10-22T13:07:49.537 に答える
0

次のようなものを使用する必要があります。

$("select#myselect").val('').attr('selected', true);

上記の作業フィドル: http://jsfiddle.net/gsN9d/

別の ("prop" の新しい構文) として、次を使用します。

$("select#myselect").val('').prop('selected', true);
于 2012-10-22T13:08:09.670 に答える