Cách lấy giá trị thuộc tính tùy chọn trong JavaScript?

Một tùy chọn tạo điều kiện cho chúng tôi danh sách tùy chọn. Nó cho phép chúng tôi chọn một hoặc nhiều tùy chọn. Chúng tôi sử dụng các yếu tố để hình thành một tùy chọn. Ví dụ. Tùy chọn cho phép chúng tôi chọn một tùy chọn tại một thời điểm được đề cập ở trên

If we wish more than one selections, we can include attribute to elements below: HTMLSelectElement type We use the HTMLSelectElement type for interacting withoption in JavaScript.

Loại HTMLSelectElement chứa các thuộc tính hữu ích sau

• đã 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

    In this article, we will demonstrate how to get the value of the option selected by a user in tag using JavaScript. The JavaScript app will consist of the following functionalities:

    1. Cho phép người dùng chọn một tùy chọn từ danh sách thả xuống
    2. Gửi tùy chọn đã chọn
    3. Nhận giá trị của tùy chọn đã chọn và hiển thị nó trên màn hình

    React JS Dropdown với Search và M

    Vui lòng bật JavaScript

    React JS Dropdown với Search và Multi-select

    Hiển thị giá trị do người dùng chọn từ danh sách thả xuống

    1. Wrap around tag

    The first step is to make sure that

    tag is enclosed by

    tag for the following reasons:

    1. Multiple inputs can be accessed through a single form element. Hence we only need to use the DOM query selector once for the parent element.
       Tránh các đầu vào xung đột có cùng tên
       Cho phép các thuộc tính biểu mẫu như loại, hành động, tên, v.v.

       
         
       
           
       
             Your Favorite Super Hero:
             

       None Batman Superman Spiderman