web-dev-qa-db-ja.com

選択リストの最初のオプションを選択するJavaScript

リセットボタンを作成する必要があります。このボタンをクリックすると、フォーム内のすべての選択リストがインデックス0に設定されます。このコードを関数で試しましたが、myForm.lengthに構文エラーが発生します。

<script type="text/javascript">function ResetForm(form) {     
var myForm = document.forms[form];   
  for( var i=0; i < myForm.length; i++ ){                                   
myForm.select[i].selectedIndex =0;     }  }

</script>
selectreset
12
Amna Ahmed

someForm.selectなどのプロパティはありません。代わりにこれを試してください：

selectTags = myForm.getElementsByTagName("select");

for(var i = 0; i < selectTags.length; i++) {
  selectTags[i].selectedIndex =0;
}
20
Another Code

.selectedIndexのように、mySelect.selectedIndex = 0;プロパティを設定するだけです。以下の例を試してください。

var doc = document;
var myCheckbox = doc.getElementById('my-checkbox');
var mySelect = doc.getElementById('my-select');

myCheckbox.addEventListener("click", function(e){
  if (this.checked){
    mySelect.disabled = false;     
  } else {
    mySelect.selectedIndex = 0;
    mySelect.disabled = true;     
  }
}); 
<label><input type="checkbox" id="my-checkbox" value=""> Enable Dropdown</label><br>

<select id="my-select" disabled>
  <option class="placeholder" selected disabled value="">Select credential</option>
  <option value="apples">apples</option>
  <option value="oranges">oranges</option>
  <option value="bananas">bananas</option>
</select>
3
Ron Royston

Ron Roystonから返答する簡単なメモ（これはChrome 74.0）で試しただけです）

オプションが無効になっている場合、_mySelect.selectedIndex = 0;_または$('#mySelect').prop("selectedIndex", 0);の設定は機能しません。

これにより時間とフラストレーションが軽減されることを願っています！

2
antman3351

ここでjqueryが役立つかもしれません。これでうまくいくはずです...

$(function()
{
    $('.resetButton').click(function()
    {
        $(this).closest('form').find('select').each(function()
        {
            $(this)[0].selectedIndex=0;
        });
    });
});

<input type="reset" class="resetButton" />

0
flagoworld

これにより、最初のオプションに変更した直後にすべての選択が設定されます。

    <select onchange="your_selection_func(); this.selectedIndex=0;">
0
Guerteltier

私はいくつかのハックを見つけました：

<select onchange="doSomething()">
  <option value="a" selected disabled hidden>a</option>
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="…">…</option>
</select>

selected disabled hiddenを組み合わせると、（視覚的に）最初のオプションがchangeイベントで応答します（同じvalue！でも）。

IE、Edge、Opera、Chromeでの作業、ただしnot FFでの作業:(

0
iiic