Để thay đổi tùy chọn đã chọn trong phần tử HTML ` `.

Bạn đang xem : select bộ tùy chọn đã chọn

Để thay đổi tùy chọn đã chọn trong phần tử HTML & lt; select & gt; , chúng tôi phải thay đổi thuộc tính value trên phần tử & lt; select & gt; hoặc thuộc tính đã chọn trên & lt; option & gt; yếu tố chúng tôi muốn chọn.

Có nhiều cách khác nhau mà chúng tôi có thể thực hiện và việc chọn cách này hay cách khác sẽ tùy thuộc vào thông tin chúng tôi có sẵn cho chúng tôi. Nó có thể là văn bản được hiển thị trên phần tử option , chỉ mục của nó, id , v.v.

Hãy xem 6 cách khác nhau để thay đổi tùy chọn đã chọn bằng JavaScript:

1. Thay đổi tùy chọn đã chọn theo giá trị

Để thay đổi tùy chọn đã chọn theo thuộc tính value , tất cả những gì chúng ta phải làm là thay đổi thuộc tính value của & lt; select & gt; phần tử.

Hộp chọn sau đó sẽ tự cập nhật để phản ánh trạng thái của thuộc tính này. Đây là cách dễ dàng và đơn giản nhất để cập nhật trạng thái hộp đã chọn.

Giả sử chúng tôi muốn chọn tùy chọn chứa thuộc tính value = "steve" .

  

& lt; < / p> select

id

=

"

mySelect

"

& gt;


& lt;

tùy chọn

value

=

"

ann

"

& gt;

Ann Frank

& lt; /

tùy chọn

& gt;


& lt;

tùy chọn

value

< p class = "dấu chấm câu mã thông báo attr-equals"> =

"

paul

"

< p class = "token attr-name"> được chọn

& gt;

Paul Allen

& lt; /

tùy chọn

& gt;


& lt;

tùy chọn

giá trị

=

"

steve

"

& gt;

Steve Jobs

& lt; /

tùy chọn

& gt;


& lt; /

chọn

& gt;

Tất cả những gì chúng tôi phải làm là đặt giá trị của hộp chọn thành cùng giá trị đó:

  

const

changeSelected

=

(

e

)

= & gt;

{


const

$ select

=

document

.

querySelector

(

'# mySelect'

)

;


$ select

.

value

=

'steve'


}

;

Xem Bút
trên
CodePen .

2. Thay đổi tùy chọn đã chọn theo văn bản tùy chọn

Chúng tôi cũng có thể muốn thay đổi giá trị của một hộp chọn bằng văn bản của phần tử & lt; option & gt; được hiển thị cho khách truy cập.

Làm điều này có lẽ là cách phức tạp nhất, nhưng vẫn có thể thực hiện một việc tương đối đơn giản. Chúng tôi phải lặp lại các tùy chọn và so sánh văn bản của chúng với văn bản của phần tử chúng tôi muốn chọn.

Khi chúng tôi tìm thấy phần tử mà chúng tôi muốn cập nhật, chúng tôi sẽ cập nhật thuộc tính đã chọn của nó và đặt nó thành true . Bằng cách này, hộp chọn cũng sẽ tự cập nhật để phản ánh thay đổi này.

Lưu ý: điều này chỉ hoạt động đối với các phần tử hộp được chọn chỉ thừa nhận một giá trị duy nhất. Nếu bạn đang sử dụng hộp chọn quản lý nhiều phần tử đã chọn , điều này sẽ chỉ thêm một tùy chọn khác vào đa lựa chọn thay vì thay đổi tùy chọn đang hoạt động cho một lựa chọn khác. < / p>

  

const

changeSelected

=

(

e

)

= & gt;

{


const

text

=

'Steve Jobs'

;

const

$ select

=

document

.

querySelector

(

'# mySelect'

)

;


const

$ options

=

Mảng

.

từ

(< / p> $ select

.

options

)

;


const

optionToSelect

=

$ options

.

tìm

(

mục

= & gt ;

item

.

text

===

text

)

;


optionToSelect

.

đã chọn

=

true

;


}

;

Xem Bút
trên
CodePen .

Có một cách khác để thực hiện việc này và cách đó sẽ giải quyết vấn đề với nhiều đầu vào được lựa chọn. Về cơ bản, khi chúng tôi tìm thấy phần tử có văn bản mà chúng tôi đang tìm kiếm, thay vì chỉ thay đổi thuộc tính đã chọn của nó, chúng tôi sẽ nhận thuộc tính value và sử dụng nó để đặt nó làm giá trị duy nhất cho toàn bộ hộp chọn.

  

const

changeSelected

=

(

e

)

= & gt;

{


const

text

=

'Steve Jobs'

;

const

$ select

=

document

.

querySelector

(

'# mySelect'

)

;


const

$ options

=

Mảng

.

từ

(< / p> $ select

.

options

)

;


const

optionToSelect

=

$ options

.

tìm

(

mục

= & gt ;

item

.

text

===

text

)

;




$ select

.

giá trị

=

optionToSelect

.

value

;


}

;

Xem Bút
trên
CodePen .

3. Thay đổi tùy chọn đã chọn theo id tùy chọn, lớp hoặc thuộc tính.

Điều này cũng khá đơn giản. Giải pháp này cũng sẽ hoạt động đối với các đầu vào có nhiều lựa chọn bằng cách chỉ định một giá trị duy nhất cho nó:

  

const

changeSelected

=

(

e

)

= & gt;

{


const

$ select

=

document

.

querySelector

(

'# mySelect'

)

;


const

$ option

=

$ select

.

querySelector

(

'# myId'

)

;


$ select

.

value

=

$ option

.

giá trị

;


}

;

Xem Bút
trên
CodePen .

Và tất nhiên, nó có thể được thực hiện theo cách tương tự nếu chúng ta có thuộc tính class thay vì id hoặc bất kỳ thuộc tính nào khác như data-select = "true" . Chỉ cần thay đổi truy vấn để nhận phần tử tùy chọn:

  

const

$ option

=

$ select

.

querySelector

(

'# myId'

)

;




const

$ option

=

$ select

.

querySelector

(

'# mySelect .myId'

)

;




const $ option

=

$ select

.

querySelector

(

'# mySelect [data-select = "myElement"]'

)

;

4. Thay đổi tùy chọn đã chọn theo chỉ mục

Nếu tất cả những gì chúng tôi có là chỉ mục của phần tử tùy chọn, chúng tôi có thể đặt thuộc tính đã chọn bằng cách truy xuất < mã> chọn tùy chọn hộp . Sau đó, chúng tôi chỉ phải chọn một cái chúng tôi cần từ mảng theo chỉ mục của nó.

Lưu ý rằng chỉ mục dựa trên 0. Vì vậy, phần tử & lt; option & gt; đầu tiên sẽ có chỉ mục 0 , 1 tiếp theo, v.v.

Biết được điều này, nếu chúng tôi muốn chọn phần tử thứ 3, chúng tôi sẽ sử dụng chỉ mục 2 trong mã của mình để chọn phần tử đó:

  
document

.

querySelector < / p>

(

'# mySelect'

)

.

querySelector

(

' tùy chọn '

)

[

2

]

.

đã chọn

=

'đã chọn'

Hãy xem nó hoạt động trên một sự kiện nhấp chuột:

Xem Bút
trên
CodePen .

Và được viết lại để phù hợp với nhiều lựa chọn đầu vào:

  

const

$ select

= tài liệu

.

querySelector

(

'# mySelect'

)

;


$ select

.

value

=

$ select

.

querySelector

(

'tùy chọn'

)

[

2

]

. giá trị

;

Kết luận

Hãy nhớ rằng, cho dù bạn chọn sử dụng cách nào để thay thế và thay đổi phần tử đã chọn trên các phần tử & lt; select & gt; của mình, bạn vẫn nên cập nhật thuộc tính value nếu bạn muốn một phần tử được chọn. Nếu không, khi có các hộp chọn thừa nhận nhiều phần tử, bạn sẽ không thay thế phần tử hiện hoạt mà chỉ thêm một phần tử khác.

Nếu bạn đang học JavaScript và điều này có vẻ hơi khó khăn đối với bạn, thì không có gì phải lo lắng! Cuối cùng, bạn sẽ đạt được điều đó. Xem mất bao lâu để học JavaScript cách tốt nhất để học JavaScript là gì!

Ezoic

báo cáo quảng cáo này

 Ezoic

báo cáo quảng cáo này


Xem thêm những thông tin liên quan đến chủ đề chọn bộ tùy chọn đã chọn

Chọn 1 tụ bài: CHUYỆN TÌNH YÊU NỬA CUỐI NĂM 2022 CỦA BẠN SẼ NHƯ THẾ NÀO? 🥰 (timestamp dưới video)

alt

  • Tác giả: Mona's Tarot
  • Ngày đăng: 2022-06-21
  • Đánh giá: 4 ⭐ ( 2606 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chọn tụ: 0:28
    Tụ 1: 0:33
    Tụ 2: 15:07
    Tụ 3: 33:56

    🌹NOTE: Bạn nào có nhu cầu trải bài riêng thì inbox mình qua fanpage nhé 😊

    https://www.facebook.com/Monas-Tarot-106126662004380/

    tarot monastarot tinhyeu chọnmộttụbài chon1tubai traibaitarot xemtarot vutru chualanh

Cách tạo nhiều lựa chọn trong danh sách thả xuống trong Google Sheets

  • Tác giả: gitiho.com
  • Đánh giá: 5 ⭐ ( 7930 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mặc định Google Sheets chỉ cho phép chọn một tùy chọn từ danh sách thả xuống. Trong bài này Gitiho sẽ chỉ cho bạn cách tạo một danh sách thả xuống cho phép nhiều lựa chọn.

Làm thế nào để thay đổi các tùy chọn của hệ thống? – SME2020

  • Tác giả: helpsme.misa.vn
  • Đánh giá: 3 ⭐ ( 6303 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách lưu lại các tùy chọn giao diện trên Windows 10

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 4 ⭐ ( 2355 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách lưu lại các tùy chọn, thiết lập giao diện trên Windows 10

Tùy chọn khôi phục trong Windows

  • Tác giả: support.microsoft.com
  • Đánh giá: 4 ⭐ ( 9213 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về các tùy chọn khôi phục trong Windows. Tìm hiểu cách đặt lại PC của bạn, quay lại phiên bản Windows trước hay sử dụng phương tiện để cài đặt lại Windows.

Làm thế nào để kiểm tra nếu một tùy chọn được chọn?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 9094 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] CẬP NHẬT Một phương thức jQuery trực tiếp hơn cho tùy chọn đã chọn sẽ là:…

Tạo một danh sách tùy chọn trong Excel: tĩnh, động, từ một bảng tính khác

  • Tác giả: blog.hocexcel.online
  • Đánh giá: 3 ⭐ ( 9804 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: blog.hocexcel.onine sẽ giới thiệu và hướng dẫn các bạn cách tạo một danh sách tùy chọn trong Excel tĩnh, động, từ một bảng tính khác vô cùng đơn giản....

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Hướng dẫn học SQL cho người mới bắt đầu với SQL Server - câu lệnh having trong sql

By ads_php