JavaScript chọn phần tử – javascript chọn một tùy chọn

Giới thiệu về phần tử select trong HTML

A Phần tử & lt; select & gt; cung cấp cho bạn một danh sách các tùy chọn. Phần tử & lt; select & gt; cho phép bạn chọn một hoặc nhiều tùy chọn.

Để tạo phần tử & lt; select & gt; , bạn sử dụng & lt; chọn các phần tử & gt; và & lt; option & gt; . Ví dụ:

 
  
 & lt; 
 chọn 
 
 id 
 = 
" framework "
 & gt; 

    
 & lt; 
 option 
 
 value 
 = 
" 1 "
 & gt; 
 Tùy chọn góc cạnh 
 & lt; / 
 
 & gt; 
    
 & lt; 
 option 
 
 value 
 = 
" 2 "
 & gt; 
 React 
 & lt; / 
 option 
 & gt; 
    
 & lt; 
 option 
 
 value 
 = 
" 3 "
 & gt; 
 Vue.js 
 & lt; / 
 option 
 & gt; < / p>
    
 & lt; 
 option 
 
 value 
 = 
" 4 "
 & gt; 
 Ember.js 
 & lt; / 
 option 
 & gt; < / p>
 & lt; / 
 chọn 
 & gt; 
  
 
 Ngôn ngữ mã: 
 
 HTML, XML 
 
 (
 
 xml 
 
) 
 

& lt; select & gt; <ở trên / code> phần tử cho phép bạn chọn một tùy chọn tại một thời điểm.

 
  
 & lt; 
 chọn 
 
 id 
 = 
 "framework" 
 
 nhiều 
 & gt; 

    
 & lt; 
 option 
 
 value 
 = 
" 1 "
 & gt; 
 Tùy chọn góc cạnh 
 & lt; / 
 
 & gt; 
    
 & lt; 
 option 
 
 value 
 = 
" 2 "
 & gt; 
 React 
 & lt; / 
 option 
 & gt; 
    
 & lt; 
 option 
 
 value 
 = 
" 3 "
 & gt; 
 Vue.js 
 & lt; / 
 option 
 & gt; < / p>
    
 & lt; 
 option 
 
 value 
 = 
" 4 "
 & gt; 
 Ember.js 
 & lt; / 
 option 
 & gt; < / p>
 & lt; / 
 chọn 
 & gt; 
  
 
 Ngôn ngữ mã: 
 
 HTML, XML 
 
 (
 
 xml 
 
) 
 

• selectIndex - trả về chỉ mục dựa trên 0 của tùy chọn đã chọn. selectIndex là -1 nếu không có tùy chọn nào được chọn. Nếu phần tử & lt; select & gt; cho phép nhiều lựa chọn, thì selectIndex trả về giá trị của tùy chọn đầu tiên.
• < code> value – trả về thuộc tính value của phần tử tùy chọn được chọn đầu tiên nếu có. Nếu không, nó trả về một chuỗi trống.
• nhiều – trả về true nếu phần tử & lt; select & gt; cho phép nhiều lựa chọn . Nó tương đương với thuộc tính multiple .

Thuộc tính selectIndex

Để chọn một & lt ; select & gt; phần tử, bạn sử dụng API DOM như getElementById () hoặc querySelector () .

Ví dụ sau minh họa cách lấy chỉ mục của tùy chọn đã chọn:

 

 & lt; 
 html 
 & gt; 

 & lt; 
 head 
 & gt; 

    
 & lt; 
 title 
 & gt; 
 JavaScript Chọn Phần tử Demo 
 & lt; / 
 title 
 & gt; 

    
 & lt; 
 liên kết 
 
 href 
 = 
" css / selectbox.css "
 
 rel 
 = 
" stylesheet "
 & gt; < / p>
 & lt; / 
 head 
 & gt; 

 & lt; 
 body 
 & gt; 

    
 & lt; 
 biểu mẫu 
 & gt; 

        
 & lt; 
 label 
 
 cho 
 = 
" framework "
 & gt; 
 Chọn một JS Framework 
 & lt; / 
 label 
 & gt; 

        
 & lt; 
 chọn 
 
 id 
 = 
" framework "
 & gt; 

            
 & lt; 
 option 
 
 value 
 = 
" 1 "
 & gt; 
 Tùy chọn góc cạnh 
 & lt; / 
 
 & gt; 
            
 & lt; 
 option 
 
 value 
 = 
" 2 "
 & gt; 
 React 
 & lt; / 
 option 
 & gt; 
            
 & lt; 
 option 
 
 value 
 = 
" 3 "
 & gt; 
 Vue.js 
 & lt; / 
 option 
 & gt; < / p>
            
 & lt; 
 option 
 
 value 
 = 
" 4 "
 & gt; 
 Ember.js 
 & lt; / 
 option 
 & gt; < / p>
        
 & lt; / 
 chọn 
 & gt; 

        Nút 
 & lt; 
 
 
 id 
 = 
" btn "
 & gt; 
 Lấy chỉ mục đã chọn 
 & lt; / 
 nút 
 & gt; 

    
 & lt; / 
 biểu mẫu 
 & gt; 

    
 & lt; 
 script 
 & gt; 
 

        
 const 
 btn = 
 document 
 .querySelector (
 '# btn' < / p>);
        
 const 
 sb = 
 document 
 .querySelector (
 '# framework' < / p>)
        btn.onclick = 
 (
 event 
) = & gt; 
 {
            event.preventDefault ();
             
            alert (sb.selectedIndex);
        };
    
 
 & lt; / 
 script 
 & gt; 

 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 
  
 
 Ngôn ngữ mã: 
 
 HTML, XML 
 
 (
 
 xml 
 
) 
 

Cách hoạt động:

• Đầu tiên, chọn các phần tử & lt; button & gt; và & lt; select & gt; bằng phương thức querySelector () .
• Sau đó, đính kèm trình xử lý sự kiện nhấp chuột vào nút và hiển thị chỉ mục đã chọn bằng phương thức alert () khi nút được nhấp.

Thuộc tính value

Thuộc tính value của phần tử & lt; select & gt; phụ thuộc vào < phần tử code> & lt; option & gt; và thuộc tính HTML multiple :

• Nếu không có tùy chọn nào được chọn, thuộc tính value của hộp chọn là một chuỗi trống.
• Nếu một tùy chọn được chọn và có thuộc tính value , thuộc tính value của hộp chọn là giá trị của tùy chọn đã chọn.
• Nếu một tùy chọn được chọn nhưng không có Thuộc tính value , thuộc tính value của hộp chọn là văn bản của tùy chọn đã chọn.
• Nếu nhiều tùy chọn được chọn, giá trị Thuộc tính của hộp chọn có nguồn gốc từ tùy chọn được chọn đầu tiên dựa trên hai quy tắc trước đó.

Xem ví dụ sau:

 
 
 & lt; 
 html 
 & gt; 

 & lt; 
 head 
 & gt; 

    
 & lt; 
 title 
 & gt; 
 Giá trị đã chọn của JavaScript 
 & lt; / < p class = "hljs-name"> title 
 & gt; 

    
 & lt; 
 liên kết 
 
 href 
 = 
" css / selectbox.css "
 
 rel 
 =
 "bảng định kiểu" 
 & gt; 

 & lt; / 
 head 
 & gt; 

 & lt; 
 body 
 & gt; 

    
 & lt; 
 div 
 
 id 
 = 
" container "
 & gt; 

        
 & lt; 
 biểu mẫu 
 & gt; 

            
 & lt; 
 label 
 
 cho 
 = 
" framework "
 & gt; 
 Chọn một JS Framework: 
 & lt; / 
 label 
 & gt ; 

            
 & lt; 
 chọn 
 
 id 
 = 
" framework "
 & gt; 

                
 & lt; 
 option 
 
 value 
 = 
" "
 & gt; 
 Tùy chọn góc cạnh 
 & lt; / 
 
 & gt; 

                
 & lt; 
 option 
 
 value 
 = 
" 1 "
 & gt; 
 React 
 & lt; / 
 option 
 & gt; 
                
 & lt; 
 option 
 
 value 
 = 
" 2 "
 & gt; 
 Vue.js 
 & lt; / 
 option 
 & gt; < / p>
                
 & lt; 
 option 
 & gt; 
 Ember.js 
 & lt; / < p class = "hljs-name"> tùy chọn 
 & gt; 

            
 & lt; / 
 chọn 
 & gt; 

            Nút 
 & lt; 
 
 
 id 
 = 
" btn "
 & gt; 
 Nút Lấy Giá trị đã Chọn 
 & lt; / 
 
 & gt; 

        
 & lt; / 
 biểu mẫu 
 & gt; 

    
 & lt; / 
 div 
 & gt; 

    
 & lt; 
 script 
 & gt; 
 

        
 const 
 btn = 
 document 
 .querySelector (
 '# btn' < / p>);
        
 const 
 sb = 
 document 
 .querySelector (
 '# framework' < / p>)
        btn.onclick = 
 (
 event 
) = & gt; 
 {
            event.preventDefault ();
            alert (sb.value);
        };
    
 
 & lt; / 
 script 
 & gt; 

 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 
  
 
 Ngôn ngữ mã: 
 
 HTML, XML 
 
 (
 
 xml 
 
) 
 

Trong ví dụ này:

• Nếu bạn chọn tuỳ chọn đầu tiên, thuộc tính value của & lt; select & gt; sẽ trống.
• Nếu bạn chọn tuỳ chọn cuối cùng , thuộc tính value của hộp chọn là Ember.js vì tùy chọn đã chọn không có thuộc tính value .
• Nếu bạn chọn tùy chọn thứ hai hoặc thứ ba, thuộc tính giá trị sẽ là "1" hoặc "2" .

Loại HTMLOptionElement

Trong JavaScript, loại HTMLOptionElement đại diện cho phần tử & lt; option & gt; .

< code> HTMLOptionElement type có các thuộc tính tiện dụng sau:

< li> index – chỉ mục của tùy chọn bên trong tập hợp các tùy chọn.
• đã chọn – trả về true khi tùy chọn đã được chọn. Bạn đặt thuộc tính này thành true để chọn một tùy chọn.
• text – trả về văn bản của tùy chọn.
• value – trả về thuộc tính giá trị HTML.

Phần tử & lt; select & gt; có thuộc tính options cho phép bạn truy cập các tùy chọn bộ sưu tập:

 
  
 selectBox  
. tùy chọn 
  
 
 Ngôn ngữ mã: 
 
 CSS 
 
 (
 
 css 
 
 ) 
 

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

< pre class = "wp-block-code">

const

text = selectBox.options [

1

] .text;

const

value = selectBox.options [

1

] .value;

Ngôn ngữ mã:

JavaScript

(

javascript

)

< p> Để có được tùy chọn đã chọn của phần tử & lt; select & gt; với một lựa chọn duy nhất, bạn sử dụng mã sau:

 
  
 let 
 selectOption = selectBox.options [selectBox.selectedIndex];  
 
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 

Sau đó, bạn có thể truy cập văn bản và giá trị của tùy chọn đã chọn qua thuộc tính text và value :

 
  
 const 
 selectText = selectOption.text;
 const 
 selectValue = selectOption.value;  
 
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 

Khi phần tử & lt; select & gt; cho phép nhiều lựa chọn, bạn có thể sử dụng thuộc tính đã chọn để xác định tùy chọn nào được chọn :

 
 
 & lt; 
 html 
 & gt; 

 & lt; 
 head 
 & gt; 

    
 & lt; 
 title 
 & gt; 
 JavaScript Chọn Ô 
 & lt; / < p class = "hljs-name"> title 
 & gt; 

    
 & lt; 
 liên kết 
 
 rel 
 = 
" stylesheet "
 
 href 
 = 
" css / selectbox.css "
 & gt; < / p>
 & lt; / 
 head 
 & gt; 

 & lt; 
 body 
 & gt; 

    
 & lt; 
 div 
 
 id 
 = 
" container "
 & gt; 

        
 & lt; 
 biểu mẫu 
 & gt; 

            
 & lt; 
 label 
 
 cho 
 = 
" framework "
 & gt; 
 Chọn một hoặc nhiều JS Framework: 
 & lt; / 
 label  & gt; 
            
 & lt; 
 chọn 
 
 id 
 = 
" framework "
 
 nhiều 
 & gt; 

                
 & lt; 
 option 
 
 value 
 = 
" 1 "
 & gt; 
 Tùy chọn góc cạnh 
 & lt; / 
 
 & gt; 
                
 & lt; 
 option 
 
 value 
 = 
" 2 "
 & gt; 
 React 
 & lt; / 
 option 
 & gt; 
                
 & lt; 
 option 
 
 value 
 = 
" 3 "
 & gt; 
 Vue.js 
 & lt; / 
 option 
 & gt; < / p>
                
 & lt; 
 option 
 
 value 
 = 
" 4 "
 & gt; 
 Ember.js 
 & lt; / 
 option 
 & gt; < / p>
            
 & lt; / 
 chọn 
 & gt; 

            Nút 
 & lt; 
 
 
 id 
 = 
" btn "
 & gt; 
 Nhận 
 & lt; / 
 nút 
 & gt; < / p>
        
 & lt; / 
 biểu mẫu 
 & gt; 

    
 & lt; / 
 div 
 & gt; 

    
 & lt; 
 script 
 & gt; 
 

        
 const 
 btn = 
 document 
 .querySelector (
 '# btn' < / p>);
        
 const 
 sb = 
 document 
 .querySelector (
 '# framework' < / p>);

        btn.onclick = 
 (
 e 
) = & gt; 
 {
            e.preventDefault ();
            
 const 
 selectValues ​​= [] .filter
                .call (sb.options, option = & gt; option.selected)
                .map (
 
 option 
 = & gt; 
 option.text);
            cảnh báo (giá trị được chọn);
        };
    
 
 & lt; / 
 script 
 & gt; 

 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 
  
 Ngôn ngữ mã: 
 
 HTML, XML 
 
 (
 < p class = "shcb-language__slug"> xml 
 
) 
 

Trong này ví dụ: sb.options là một đối tượng giống mảng, vì vậy nó không có các phương thức filter () như Đối tượng Array .

Để mượn các phương thức này từ đối tượng Array , bạn sử dụng lệnh gọi () < / span> . Ví dụ: hàm sau trả về một mảng các tùy chọn đã chọn:

 
  []. Filter.call (sb .options, option = & gt; option.selected)  
 
 Ngôn ngữ mã: 
 
 PHP  
 (
 
 php 
 
) 
 

Và để nhận thuộc tính text của các tùy chọn, bạn xâu chuỗi kết quả của phương thức filter () với map () , như sau:

 
 . map (
 
 option 
 = & gt; 
 option.text);  
 
 Code ngôn ngữ: 
 
 JavaScript 
 
 (
 
 javascript  
) 
 

Tóm tắt

• T phần tử & lt; select & gt; cho phép bạn chọn một hoặc nhiều tùy chọn. Thêm thuộc tính multiple vào phần tử & lt; select & gt; để cho phép nhiều lựa chọn.
• HTMLSelectElement đại diện cho & lt; chọn & gt; phần tử. Sử dụng selectIndex và value để lấy chỉ mục và giá trị của tùy chọn đã chọn.
• HTMLOptionElement đại diện cho & lt; option & gt; phần tử. Nếu tùy chọn được chọn, thuộc tính đã chọn là đúng. Các thuộc tính selectText và selectValue trả về giá trị text và của tùy chọn đã chọn.

Hướng dẫn này có hữu ích không?