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.
    2. Tránh các đầu vào xung đột có cùng tên
    3. 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
          
        
      
    

    2. Declare name for tag

    Next, we need to specify the “name” attribute for the tag which allows it to be accessed directly from the parent tag.

    In the below example, we are specifing the name attribute of as “superHero”. The element is accessed through DOM using “document.forms[‘user-form‘].superHero” .

    
      None
      Batman
      Superman
      Spiderman
    

    3. Adding value to each tag

    Now we are able to access the tag from DOM, hence the option selected from the dropdown needs to be identified. To achieve this, we need to differentiate each option by specifying different strings for the “value” attribute.

    Trong ví dụ bên dưới, nếu người dùng chọn tùy chọn “Batman” từ danh sách thả xuống, giá trị của “tài liệu. biểu mẫu ['biểu mẫu người dùng']. siêu anh hùng” sẽ là “người dơi“. Sau đó, nếu lựa chọn được thay đổi thành “Người nhện“, giá trị sẽ được cập nhật thành “Người nhện“

    None
    Batman
    Superman
    Spiderman

    4. Hàm JS để nhận giá trị do người dùng chọn

    Khi đã có mã HTML, đã đến lúc thêm mã JavaScript để hiển thị giá trị đã chọn trên màn hình

    Trong chức năng “handleSubmit”, “sự kiện. preventDefault[]” tránh hành động tải lại trang mặc định. Tiếp theo, giá trị đã chọn được hiển thị trên màn hình bằng cách gán giá trị chuỗi với “selectedOption. giá trị” cho “giá trị hiển thị. nội dung“

    var showValue = document.getElementById["display-value"];
    
    // Function to display selected value on screen
    function handleSubmit[event] {
      event.preventDefault[];
      var selectedOption = document.forms["user-form"].superHero;
      showValue.innerText = `You have selected: ${selectedOption.value}`;
    }

    5. Hiển thị giá trị đã chọn khi nhấp vào nút

    For implementing the functionality to display selected value on button click, we need to create and

    html element.

    Submit
    

    Cuối cùng, để kích hoạt chức năng “handleSubmit” khi nhấp vào nút, trình xử lý sự kiện javascript loại “nhấp chuột” đã được thêm vào

    Làm cách nào để lấy giá trị của một tùy chọn đã chọn trong JavaScript?

    Có thể tìm thấy giá trị của phần tử đã chọn bằng cách sử dụng thuộc tính giá trị trên phần tử đã chọn để xác định danh sách . Thuộc tính này trả về một chuỗi đại diện cho thuộc tính giá trị của phần tử

    Làm cách nào để lấy giá trị được chọn trong danh sách thả xuống trong JavaScript?

    Nhận giá trị đã chọn và văn bản của danh sách thả xuống. Nếu chúng ta muốn lấy văn bản tùy chọn đã chọn, thì chúng ta nên sử dụng thuộc tính selectIndex của hộp chọn. Thuộc tính selectIndex biểu thị chỉ mục của tùy chọn đã chọn. Khi chúng tôi nhận được chỉ mục đã chọn, chúng tôi có thể truy cập tùy chọn đã chọn