Làm cách nào để đặt tùy chọn được chọn trong JavaScript?

select là một phần tử đầu vào HTML chỉ định danh sách các tùy chọn thả xuống mà từ đó người dùng có thể chọn bất kỳ tùy chọn nào. Trong bài viết hôm nay, chúng ta sẽ tìm hiểu cách thiết lập giá trị cho phần tử HTML này trong JavaScript

Đặt phần tử chọn bằng cách sử dụng document.getElementById[] trong JavaScript

Phương thức document tích hợp này do JavaScript cung cấp trả về đối tượng phần tử có id khớp với id đã chỉ định. Giá trị thực tế được thiết lập bởi dòng element.value = 'NEW_VALUE'

cú pháp

document.getElementById[$id];

Tham số

    
    
    



Click to Update to MacOS.

Giá trị trả về

Trả về đối tượng phần tử DOM tương ứng nếu phần tử tương ứng được tìm thấy;

mã ví dụ

    
    
    



Click to Update to MacOS.

đầu ra

• đã chọn Index- Thuộc tính này cung cấp chỉ mục tùy chọn đã chọn dựa trên số không. Selected Index sẽ là -1 khi không có tùy chọn nào được chọn. Khi tùy chọn cho phép lựa chọn nhiều lần, chỉ mục được chọn sẽ cung cấp giá trị của tùy chọn đầu tiên. giá trị- Thuộc tính giá trị cung cấp thuộc tính giá trị của thành phần tùy chọn được chọn ban đầu nếu có một, nếu không, nó sẽ trả về các chuỗi trống. nhiều- Các thuộc tính nhiều cho đúng khi thành phần cho phép nhiều hơn một lựa chọn. Nó giống như nhiều thuộc tính

thuộc tính chỉ mục đã chọn

Chúng tôi áp dụng DOM API như querySelector[] hoặc getElementById[]

Ví dụ cho biết cách lấy chỉ mục tùy chọn đã chọn được đề cập bên dưới

Làm thế nào nó hoạt động

• Ban đầu, chọn các thành phần và với sự trợ giúp của phương thức querySelector[]. Sau đó, liên kết trình xử lý sự kiện nhấp với nút này và hiển thị chỉ mục đã chọn với sự trợ giúp của phương thức alert[] nếu nút được nhấn. thuộc tính giá trị Thuộc tính giá trị của phần tử phụ thuộc vào thành phần và nhiều thuộc tính của HTML của nó
  • Thuộc tính giá trị của hộp chọn sẽ là một chuỗi trống khi không có tùy chọn nào được chọn
  • Thuộc tính giá trị của hộp chọn sẽ là giá trị của tùy chọn đã chọn khi một tùy chọn đã được chọn và chứa thuộc tính giá trị
  • Thuộc tính giá trị của hộp chọn sẽ là văn bản của tùy chọn đã chọn khi một tùy chọn đã được chọn và không chứa thuộc tính giá trị
  • Thuộc tính giá trị của hộp chọn sẽ được lấy từ tùy chọn được chọn ban đầu liên quan đến hai quy tắc trước đây khi nhiều tùy chọn được chọn

  Xem xét ví dụ dưới đây

  Trong ví dụ trên

  • Thuộc tính giá trị của phần tử trống khi chúng ta chọn tùy chọn ban đầu. Thuộc tính giá trị của hộp chọn sẽ là Ember. js do tùy chọn đã chọn không chứa thuộc tính giá trị khi chúng tôi chọn tùy chọn cuối cùng. Thuộc tính giá trị sẽ là "1" hoặc "2" khi chúng tôi chọn tùy chọn thứ ba hoặc thứ hai. Loại HTMLOptionElement Loại HTMLOptionElement minh họa thành phần chứa thuộc tính tùy chọn cho phép chúng tôi truy cập vào các tùy chọn bộ sưu tập

    Ví dụ: để truy cập giá trị và văn bản của tùy chọn thứ hai, chúng tôi sử dụng bên dưới

    Để có được một tùy chọn đã chọn của thành phần cùng với một lựa chọn riêng lẻ, chúng tôi sử dụng đoạn mã dưới đây. Sau đó, chúng ta có thể truy cập giá trị và văn bản của một tùy chọn đã chọn theo thuộc tính giá trị và văn bản. Khi thành phần cho phép nhiều lựa chọn, chúng ta có thể sử dụng thuộc tính đã chọn để xác định tùy chọn nào được chọn

    Trong ví dụ, sb. tùy chọn là đối tượng giống như mảng. Do đó, nó không chứa phương thức filter[] giống như đối tượng Array

    Để mượn các loại phương thức này thông qua một đối tượng mảng, chúng tôi sử dụng phương thức call[], bên dưới cung cấp mảng các tùy chọn đã chọn

    Và để lấy thuộc tính văn bản của bất kỳ tùy chọn nào, chúng ta có thể xâu chuỗi kết quả của phương thức filter[] cùng với phương thức map[] như bên dưới

    Để có được Tùy chọn đã chọn bằng cách sử dụng vòng lặp

    CHÚNG TÔI có thể sử dụng vòng lặp for để lặp theo các tùy chọn danh sách đã chọn để xác định cái nào được chọn. Một chức năng có thể được mô tả để trả lại tham chiếu cho một tùy chọn đã chọn hoặc giá trị. Dưới đây cung cấp tài liệu tham khảo cho một tùy chọn đã chọn

    Chức năng này cung cấp một tùy chọn được chọn duy nhất, tương thích với loại danh sách chọn một. Chức năng tương tự tương thích với danh sách chọn pf loại chọn nhiều có thể cung cấp nhiều tùy chọn được chọn

    Làm cách nào để đặt tùy chọn đã chọn động trong JavaScript?

    Thuộc tính đã chọn='đã chọn' thường chỉ dành cho mã HTML. Nếu bạn muốn sử dụng Javascript để làm điều này, bạn nên sử dụng selectIndex. Nếu không, bạn có thể thử obj. setAttribute["đã chọn","đã chọn"]

    Làm cách nào để đặt giá trị thả xuống đã chọn trong JavaScript?

    Đặt giá trị của danh sách thả xuống bằng JavaScript/jQuery .

    Sử dụng jQuery. jQuery. Phương thức val[] cho phép đặt giá trị của menu thả xuống. JS. HTML

    Using JavaScript. In pure JavaScript, you can use the selectedIndex property which reflects the index of the selected element. JS. HTML..