Javascript для выбора первого варианта списка выбора - PullRequest
Новая
       18

Javascript для выбора первого варианта списка выбора

8 голосов
/ 03 марта 2012

Мне нужно создать кнопку сброса, которая при нажатии установит все списки выбора в форме на индекс 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>

Ответы [ 7 ]

19 голосов
/ 03 марта 2012

Нет такого свойства как someForm.select, попробуйте это вместо: 

selectTags = myForm.getElementsByTagName("select");

for(var i = 0; i < selectTags.length; i++) {
  selectTags[i].selectedIndex =0;
}
3 голосов
/ 27 декабря 2016

Вам просто нужно установить свойство .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>
0 голосов
/ 21 мая 2019

Краткое примечание к ответу от Рона Ройстона (Я только пробовал это на Chrome 74.0)

Настройка mySelect.selectedIndex = 0; или $('#mySelect').prop("selectedIndex", 0); не будет работать, если опция отключена.

Надеюсь, это сэкономит кому-то время и разочарование!

0 голосов
/ 27 марта 2017

Я нашел взломать: 

<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, но не , работа в FF: (

0 голосов
/ 15 марта 2014

Я понимаю, что это довольно старо, но хотел улучшить ответ teh1. Нет смысла создавать объект jQuery из 'this', когда вы просто собираетесь извлечь элемент DOM из него: 

$(this).closest('form').find('select').each(function() {
    this.selectedIndex = 0;
});
0 голосов
/ 05 июня 2013

Это установит каждый выбор сразу после перехода к первому параметру: 

    <select onchange="your_selection_func(); this.selectedIndex=0;">
0 голосов
/ 03 марта 2012

Вы можете найти jquery полезным здесь.Это ДОЛЖНО сделать трюк ... 

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

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

...