Javascript để chọn tùy chọn đầu tiên của danh sách lựa chọn

Question

Tôi cần tạo nút đặt lại khi nhấp sẽ đặt tất cả các danh sách chọn trong biểu mẫu thành chỉ mục 0. Tôi đã thử mã này cho hàm, nhưng nó đưa ra lỗi cú pháp trên myForm. chiều dài;

<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> 

Answer 1

Không có tài sản như someForm.select, hãy thử này để thay thế:

selectTags = myForm.getElementsByTagName("select"); 

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

Answer 2

Bạn có thể tìm jquery hữu ích ở đây. Đây NÊN làm các trick ...

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

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

Answer 3

này sẽ thiết lập mỗi lựa chọn trực tiếp sau khi chuyển sang tùy chọn đầu tiên:

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

Answer 4

Tôi nhận ra điều này là kinda cũ, nhưng muốn cải thiện câu trả lời của teh1. Không có lý do để tạo ra một đối tượng jQuery từ 'này' khi bạn chỉ cần đi để lấy các phần tử DOM lại từ nó:

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

Answer 5

Bạn chỉ cần thiết lập các .selectedIndex tài sản, như trong mySelect.selectedIndex = 0;. Hãy thử ví dụ bên dưới.

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>

Answer 6

Tôi tìm thấy một số hack: (! Ngay cả với cùng một value)

<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> 

sự kết hợp của selected disabled hidden gây rằng (visualy) tùy chọn đầu tiên phản ứng với change sự kiện.

Làm việc với IE, Edge, Opera, Chrome, nhưng không làm việc trong FF :(