Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

❮ Thẻ HTML

Thí dụ

Danh sách thả xuống với tùy chọn được chọn trước:

Chọn một chiếc xe hơi:

& nbsp; Volvo & NBSP; Saab & nbsp; VW & NBSP; Audi
 
 
 
 

Hãy tự mình thử »


Định nghĩa và cách sử dụng

Thuộc tính

 
5 là thuộc tính Boolean.

Khi có mặt, nó chỉ định rằng một tùy chọn nên được chọn trước khi trang tải.

Tùy chọn được chọn trước sẽ được hiển thị đầu tiên trong danh sách thả xuống.

Mẹo: Thuộc tính

 
5 cũng có thể được đặt sau khi tải trang, với JavaScript. The
 
5 attribute can also be set after the page loads, with a JavaScript.


Hỗ trợ trình duyệt

Thuộc tính
đã chọnĐúngĐúngĐúngĐúngĐúng

Cú pháp


❮ Thẻ HTML



Thí dụ

Tạo một danh sách thả xuống với bốn tùy chọn:

Chọn một chiếc xe hơi:

& nbsp; Volvo & NBSP; Saab & nbsp; Mercedes & NBSP; Audi
 
 
 
 

Hãy tự mình thử »

Thêm ví dụ "hãy thử nó" dưới đây.


Định nghĩa và cách sử dụng

Phần tử

 
7 được sử dụng để tạo danh sách thả xuống.

Phần tử

 
7 thường được sử dụng ở dạng, để thu thập đầu vào của người dùng.

Thuộc tính

 
9 là cần thiết để tham chiếu dữ liệu biểu mẫu sau khi biểu mẫu được gửi (nếu bạn bỏ qua thuộc tính

0, không có dữ liệu nào từ danh sách thả xuống sẽ được gửi).

Thuộc tính


1 là cần thiết để liên kết danh sách thả xuống với nhãn.

Các thẻ bên trong phần tử

 
7 Xác định các tùy chọn có sẵn trong danh sách thả xuống.

Mẹo: Luôn thêm thẻ cho thực tiễn tiếp cận tốt nhất! Always add the


Hỗ trợ trình duyệt

Yếu tố
đã chọnĐúngĐúngĐúngĐúngĐúng


Thuộc tính

Thuộc tínhGiá trịSự mô tả
lấy nét tự độnglấy nét tự độngChỉ định rằng danh sách thả xuống sẽ tự động lấy lấy nét khi tải trang
Vô hiệu hóaVô hiệu hóaChỉ định rằng danh sách thả xuống phải bị tắt
hình thứcform_idXác định hình thức danh sách thả xuống thuộc về
nhiềunhiềuChỉ định rằng có thể chọn nhiều tùy chọn cùng một lúc
TênTênXác định tên cho danh sách thả xuống
yêu cầuyêu cầuChỉ định rằng người dùng được yêu cầu chọn một giá trị trước khi gửi biểu mẫu
kích thướccon sốXác định số lượng tùy chọn hiển thị trong danh sách thả xuống

Thuộc tính toàn cầu

Thẻ

 
7 cũng hỗ trợ các thuộc tính toàn cầu trong HTML.


Thuộc tính sự kiện

Thẻ

 
7 cũng hỗ trợ các thuộc tính sự kiện trong HTML.


Nhiều ví dụ hơn

Thí dụ

Tạo một danh sách thả xuống với bốn tùy chọn:

Chọn một chiếc xe hơi:

Hãy tự mình thử »


Thêm ví dụ "hãy thử nó" dưới đây.

Định nghĩa và cách sử dụng

Phần tử

 
7 được sử dụng để tạo danh sách thả xuống.


Phần tử 7 thường được sử dụng ở dạng, để thu thập đầu vào của người dùng.

None.



Tôi nghĩ rằng việc thêm thuộc tính


5 được đặt trên phần tử
 
7 bên dưới sẽ khiến

7 chứa

5 được cung cấp của tôi theo mặc định:

Tuy nhiên, điều này không hoạt động như tôi mong đợi. Làm cách nào tôi có thể đặt phần tử


7 nào được chọn theo mặc định?

NEMUS

3,85512 Huy hiệu vàng36 Huy hiệu bạc54 Huy hiệu đồng12 gold badges36 silver badges54 bronze badges

Hỏi ngày 19 tháng 8 năm 2010 lúc 1:10Aug 19, 2010 at 1:10

1

Đặt

 
0 cho tùy chọn bạn muốn là mặc định.


Đã trả lời ngày 19 tháng 8 năm 2010 lúc 1:12Aug 19, 2010 at 1:12

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

BorealidborealidBorealid

93.1k8 Huy hiệu vàng104 Huy hiệu bạc122 Huy hiệu đồng8 gold badges104 silver badges122 bronze badges

3

Trong trường hợp bạn muốn có một văn bản mặc định như một loại trình giữ chỗ/gợi ý nhưng không được coi là giá trị hợp lệ (một cái gì đó như "hoàn thành ở đây", "chọn quốc gia của bạn" ECC.) Bạn có thể làm điều gì đó như thế này:

Đã trả lời ngày 29 tháng 5 năm 2015 lúc 9:05May 29, 2015 at 9:05

AurelioaurelioAurelio

23.8K9 Huy hiệu vàng58 Huy hiệu bạc62 Huy hiệu Đồng9 gold badges58 silver badges62 bronze badges

3

Hoàn thành ví dụ:

 

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

Al Fohnce

4.08512 Huy hiệu vàng37 Huy hiệu bạc49 Huy hiệu đồng12 gold badges37 silver badges49 bronze badges

Đã trả lời ngày 19 tháng 8 năm 2010 lúc 1:12Aug 19, 2010 at 1:12

BorealidborealidD'Arcy Rittich

93.1k8 Huy hiệu vàng104 Huy hiệu bạc122 Huy hiệu đồng38 gold badges284 silver badges280 bronze badges

5

Trong trường hợp bạn muốn có một văn bản mặc định như một loại trình giữ chỗ/gợi ý nhưng không được coi là giá trị hợp lệ (một cái gì đó như "hoàn thành ở đây", "chọn quốc gia của bạn" ECC.) Bạn có thể làm điều gì đó như thế này:

Đã trả lời ngày 29 tháng 5 năm 2015 lúc 9:05


Aurelioaurelio

23.8K9 Huy hiệu vàng58 Huy hiệu bạc62 Huy hiệu ĐồngNov 11, 2014 at 15:47

Hoàn thành ví dụ:MindJuice

Al Fohnce3 gold badges27 silver badges41 bronze badges

0

4.08512 Huy hiệu vàng37 Huy hiệu bạc49 Huy hiệu đồng

 

D'Arcy Rittichd'arcy Rittich

164K38 Huy hiệu vàng284 Huy hiệu bạc280 Huy hiệu Đồng


Tôi đã bắt gặp câu hỏi này, nhưng câu trả lời được chấp nhận và được nâng cao không hiệu quả với tôi. Hóa ra nếu bạn đang sử dụng React, thì việc cài đặt

 
5 không hoạt động.Jul 3, 2012 at 19:39

Thay vào đó, bạn phải đặt một giá trị trong thẻ

 
7 trực tiếp như hiển thị bên dưới:harmender

Đọc thêm về lý do tại sao ở đây trên trang React.5 silver badges3 bronze badges

2

Đã trả lời ngày 11 tháng 11 năm 2014 lúc 15:47

zero323

MindJuicemindjuice96 gold badges939 silver badges922 bronze badges

3.9713 huy hiệu vàng27 Huy hiệu bạc41 Huy hiệu đồngOct 16, 2013 at 20:36

Bạn có thể làm điều đó như thế này:Florian

Cung cấp từ khóa "đã chọn" bên trong thẻ tùy chọn mà bạn muốn xuất hiện theo mặc định trong danh sách thả xuống của mình.5 silver badges3 bronze badges

0

Hoặc bạn cũng có thể cung cấp thuộc tính cho thẻ tùy chọn, tức là.


Đã trả lời ngày 3 tháng 7 năm 2012 lúc 19:39

Hòa âm

7595 Huy hiệu bạc3 Huy hiệu đồng

Nếu bạn muốn sử dụng các giá trị từ một biểu mẫu và giữ cho nó động, hãy thử điều này với PHP

Thuộc tính cú pháp XHTML

 
0 Cú pháp là cách duy nhất để tương thích với cả XHTML và HTML 5. Đó là cú pháp XML chính xác và một số biên tập viên có thể hài lòng về điều này. Nó tương thích ngược hơn. Nếu tuân thủ XML là quan trọng, bạn nên làm theo cú pháp đầy đủ.

Đã trả lời ngày 16 tháng 2 năm 2019 lúc 19:10Feb 16, 2019 at 19:10

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

Michał Mielecmichał MielecMichał Mielec

1.5111 Huy hiệu vàng14 Huy hiệu bạc37 Huy hiệu đồng1 gold badge14 silver badges37 bronze badges

0

Tôi thích điều này:


'Chọn ở đây' biến mất sau khi một tùy chọn đã được chọn.

Đã trả lời ngày 6 tháng 9 năm 2016 lúc 22:59Sep 6, 2016 at 22:59

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

Chong Lip Phangchong Lip PhangChong Lip Phang

8.2695 Huy hiệu vàng62 Huy hiệu bạc92 Huy hiệu Đồng5 gold badges62 silver badges92 bronze badges

0

Một cải tiến cho câu trả lời của Nobita. Ngoài ra, bạn có thể cải thiện chế độ xem trực quan của danh sách thả xuống, bằng cách che giấu phần tử 'chọn ở đây'.


0

Đã trả lời ngày 5 tháng 6 năm 2016 lúc 15:54Jun 5, 2016 at 15:54

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

Một vi dụ khac; Sử dụng JavaScript để đặt tùy chọn đã chọn.

(Bạn có thể sử dụng ví dụ này để lặp lại một mảng các giá trị thành một thành phần thả xuống)

 
5


1

Đã trả lời ngày 17 tháng 9 năm 2013 lúc 6:37Sep 17, 2013 at 6:37

Đồng minhAlly

Huy hiệu vàng 2.4011 huy hiệu bạc17 Huy hiệu đồng1 gold badge15 silver badges17 bronze badges

4

Thuộc tính được chọn là thuộc tính Boolean.selected attribute is a boolean attribute.

Khi có mặt, nó chỉ định rằng một tùy chọn nên được chọn trước khi trang tải.

Tùy chọn được chọn trước sẽ được hiển thị đầu tiên trong danh sách thả xuống.


2

Đã trả lời ngày 25 tháng 10 năm 2013 lúc 4:12Oct 25, 2013 at 4:12

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

Tilaktilaktilak

4.4396 Huy hiệu vàng33 Huy hiệu bạc45 Huy hiệu Đồng6 gold badges33 silver badges45 bronze badges

Nếu bạn đang ở trong React, bạn có thể sử dụng

 
6 làm thuộc tính thay vì
 
7 trong thẻ chọn.

Đã trả lời ngày 23 tháng 11 năm 2017 lúc 8:12Nov 23, 2017 at 8:12

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

JohanjohanJohan

1591 Huy hiệu bạc9 Huy hiệu đồng1 silver badge9 bronze badges

Nếu bạn đang sử dụng Chọn với Angular 1, thì bạn cần sử dụng ng-init, nếu không, tùy chọn thứ hai sẽ không được chọn vì, mô-model sẽ ghi đè giá trị được chọn của defaul


3

Đã trả lời ngày 8 tháng 11 năm 2017 lúc 6:48Nov 8, 2017 at 6:48

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

Tôi chỉ đơn giản là làm cho giá trị tùy chọn chọn đầu tiên là mặc định và chỉ ẩn giá trị đó trong phần thả xuống với tính năng "ẩn" mới của HTML5. Như thế này:


4

Đã trả lời ngày 4 tháng 9 năm 2018 lúc 8:02Sep 4, 2018 at 8:02

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

Thuộc tính giá trị của thẻ bị thiếu, vì vậy nó không hiển thị như bạn mong muốn đã chọn. Theo mặc định, tùy chọn đầu tiên hiển thị trên tải trang thả xuống, nếu thuộc tính giá trị được đặt trên thẻ .... Tôi đã giải quyết vấn đề của mình theo cách này

Đã trả lời ngày 2 tháng 6 năm 2015 lúc 5:49Jun 2, 2015 at 5:49

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

X-CoderX-CoderX-Coder

2.4822 Huy hiệu vàng17 Huy hiệu bạc17 Huy hiệu đồng2 gold badges17 silver badges17 bronze badges

Tôi đã sử dụng chức năng PHP này để tạo các tùy chọn và chèn nó vào HTML của tôi


5

Và sau đó trong mã trang web của tôi, tôi sử dụng nó như dưới đây;


6

Nếu $ endmin được tạo từ biến _POST mỗi khi trang được tải (và mã này nằm trong một biểu mẫu đăng) thì giá trị được chọn trước đó được chọn theo mặc định.

Đã trả lời ngày 7 tháng 1 năm 2014 lúc 13:02Jan 7, 2014 at 13:02

GraemegraemeGraeme

3072 Huy hiệu bạc6 Huy hiệu Đồng2 silver badges6 bronze badges

Mã này đặt giá trị mặc định cho phần tử chọn HTML với PHP.


7

Đã trả lời ngày 20 tháng 2 năm 2014 lúc 14:29Feb 20, 2014 at 14:29

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

JulianjulianJulian

4.0363 Huy hiệu vàng34 Huy hiệu bạc49 Huy hiệu đồng3 gold badges34 silver badges49 bronze badges

Bạn có thể dùng:


8

thay vì,


9

Cả hai đều đúng như nhau.

Đã trả lời ngày 7 tháng 5 năm 2018 lúc 16:30May 7, 2018 at 16:30

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

Sam Samsam

1.6791 Huy hiệu vàng23 Huy hiệu bạc44 Huy hiệu đồng1 gold badge23 silver badges44 bronze badges

Đặt được chọn = "Đã chọn" giá trị tùy chọn ở đâu là 3

Vui lòng xem ví dụ dưới đây

0

Đã trả lời ngày 12 tháng 2 năm 2020 lúc 8:22Feb 12, 2020 at 8:22

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

AkborakborAkbor

1.0928 huy hiệu bạc11 huy hiệu đồng8 silver badges11 bronze badges

0

Ví dụ này đã được thử nghiệm để hoạt động với nhiều yếu tố

 
7 trên trang và cũng có thể làm việc với các yếu tố văn bản thông thường. Nó chưa được kiểm tra để đặt giá trị thành nhiều lựa chọn khi
 
9, tuy nhiên bạn có thể sửa đổi mẫu này để hỗ trợ điều đó.

  • Thêm một thuộc tính

    
    
    0 vào mỗi phần tử
     
    7 và đặt (các) giá trị thành giá trị của tùy chọn bạn muốn chọn.

  • Sử dụng

    
    
    2 của JavaScript để chọn tất cả các thành phần có thuộc tính tùy chỉnh bạn vừa thêm.

Trong ví dụ sau, khi chạy,

 
7 đầu tiên sẽ hiển thị tùy chọn với giá trị

4 như đã chọn và
 
7 thứ hai sẽ hiển thị tùy chọn với giá trị

6 như đã chọn.

1
2

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

Kraang Prime

9.7018 Huy hiệu vàng57 Huy hiệu bạc123 Huy hiệu Đồng8 gold badges57 silver badges123 bronze badges

Đã trả lời ngày 12 tháng 1 năm 2020 lúc 15:52Jan 12, 2020 at 15:52

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

Bản thân tôi sử dụng nó

3

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

Samayo

15.6K12 Huy hiệu vàng87 Huy hiệu bạc103 Huy hiệu đồng12 gold badges87 silver badges103 bronze badges

Đã trả lời ngày 7 tháng 7 năm 2016 lúc 18:44Jul 7, 2016 at 18:44

Ю й с й й Юрий Светлов

1.4362 Huy hiệu vàng19 Huy hiệu bạc26 Huy hiệu đồng2 gold badges19 silver badges26 bronze badges

Bạn chỉ cần đặt thuộc tính "được chọn" trên một tùy chọn cụ thể thay vì trực tiếp để chọn phần tử.

Dưới đây là đoạn mã cho cùng một ví dụ làm việc với các giá trị khác nhau.

4

Đã trả lời ngày 11 tháng 9 năm 2018 lúc 5:19Sep 11, 2018 at 5:19

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

Ambuj Khannaambuj KhannaAmbuj Khanna

1.0132 Huy hiệu vàng11 Huy hiệu bạc 30 Huy hiệu Đồng2 gold badges11 silver badges30 bronze badges

Giá trị đã chọn mặc định là tùy chọn-4Option-4

5

Đã trả lời ngày 25 tháng 2 năm 2021 lúc 10:37Feb 25, 2021 at 10:37

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

JimmyjimmyJimmy

8457 Huy hiệu bạc16 Huy hiệu đồng7 silver badges16 bronze badges

Bạn sẽ cần một thuộc tính "ID" trong mỗi tùy chọn để giải pháp này hoạt động:

6

Chức năng trước tiên cố gắng tìm với ID, sau đó nó sẽ tìm kiếm giá trị_selected trong các tùy chọn và nếu tìm thấy nó, nó sẽ đặt thuộc tính đã chọn trả về true. Sai nếu không

Đã trả lời ngày 7 tháng 4 năm 2021 lúc 0:16Apr 7, 2021 at 0:16

Alvarocalvarocalvaroc

3913 Huy hiệu bạc14 Huy hiệu đồng3 silver badges14 bronze badges

Vấn đề với

 
7 là, đôi khi nó bị ngắt kết nối với trạng thái của những gì hiện đang được hiển thị và trừ khi có gì đó thay đổi trong danh sách tùy chọn, không có giá trị thay đổi nào được trả về. Đây có thể là một vấn đề khi cố gắng chọn tùy chọn đầu tiên từ danh sách. Mã sau đây có thể nhận được tùy chọn đầu tiên được chọn lần đầu tiên, nhưng

8 bởi chính nó sẽ không. Có những phương pháp được mô tả ở trên bằng cách sử dụng tùy chọn giả để buộc người dùng thực hiện giá trị thay đổi để nhận giá trị đầu tiên thực tế, chẳng hạn như bắt đầu danh sách với giá trị trống. Lưu ý: Onclick sẽ gọi hàm hai lần, mã sau không, nhưng giải quyết vấn đề lần đầu tiên.

7

NWXDEV

3.9383 huy hiệu vàng15 Huy hiệu bạc22 Huy hiệu đồng3 gold badges15 silver badges22 bronze badges

Đã trả lời ngày 7 tháng 7 năm 2018 lúc 15:34Jul 7, 2018 at 15:34

Tôi sử dụng Angular và tôi đặt tùy chọn mặc định bằng cách

Mẫu HTML

8

Script:

9

Đã trả lời ngày 3 tháng 9 năm 2019 lúc 16:34Sep 3, 2019 at 16:34

Upogupogupog

4.7358 Huy hiệu vàng37 Huy hiệu bạc73 Huy hiệu đồng8 gold badges37 silver badges73 bronze badges

Để đặt mặc định bằng PHP và JavaScript:

 
0

Đã trả lời ngày 3 tháng 11 năm 2020 lúc 10:36Nov 3, 2020 at 10:36

Gomgomgom

7682 Huy hiệu vàng9 Huy hiệu bạc23 Huy hiệu đồng2 gold badges9 silver badges23 bronze badges

Đây là phương pháp đơn giản để thực hiện tùy chọn mặc định được chọn.

Có thể được sử dụng cho nhiều lựa chọn trên trang HTML.multiple selects on an HTML page.

Phương pháp:

  • Tìm mọi lựa chọn
  • Đọc ID và giá trị của chọn
  • Làm cho tùy chọn được chọn

Note:

  • Mọi lựa chọn phải có ID để tránh xung đột

 
1
 
2

Đã trả lời ngày 7 tháng 5 năm 2021 lúc 15:38May 7, 2021 at 15:38

JopiejopieJopie

3163 Huy hiệu bạc9 Huy hiệu Đồng3 silver badges9 bronze badges

Tôi đã gặp một số rắc rối với nó bởi vì tôi cần một số cách để chọn tùy chọn linh hoạt phù hợp với giá trị mà tôi có trong cơ sở dữ liệu. Kịch bản Bellow hoạt động như một nét quyến rũ đối với tôi:

 
3

Hướng dẫn select option trong html w3schools - chọn tùy chọn trong html w3schools

Sven Eberth

2.99712 Huy hiệu vàng22 Huy hiệu bạc27 Huy hiệu đồng12 gold badges22 silver badges27 bronze badges

Đã trả lời ngày 8 tháng 8 năm 2021 lúc 17:14Aug 8, 2021 at 17:14

Đây là cách tôi đã làm điều đó ...

 
4

Đã trả lời ngày 19 tháng 10 năm 2013 lúc 22:33Oct 19, 2013 at 22:33

AlexmalexmAlexM

Huy hiệu 431 Đồng1 bronze badge

1