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

Bạn đang xem : javascript chọn một tùy chọn

Tóm tắt : trong hướng dẫn này, bạn sẽ học cách xử lý phần tử & lt; select & gt; trong JavaScript.

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; & 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.

Để bật nhiều lựa chọn, bạn thêm thuộc tính multiple vào & lt; select & gt; phần tử như sau:

 

& 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

)

Loại HTMLSelectElement

Để tương tác với phần tử & lt; select & gt; trong JavaScript, bạn sử dụng loại HTMLSelectElement .

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

  • selectIndex - trả về chỉ mục dựa trên 0 của tùy chọn đã chọn. selectIndex -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; & 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 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 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 selectValue trả về giá trị text của tùy chọn đã chọn.
    • Hướng dẫn này có hữu ích không?


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

Event listener

  • Tác giả: F8 Official
  • Ngày đăng: 2020-09-19
  • Đánh giá: 4 ⭐ ( 5494 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Event listener là phương pháp thêm listener cho các sự kiện xảy ra trong DOM. Hoặc chúng ta có thể gỡ bỏ listener mà chúng ta đã thêm vào qua 2 phương thức: addEventListener và removeEventListener.

    🔥 Hãy chia sẻ các khóa học để mọi người được học MIỄN PHÍ ❤️
    🔥 Truy cập http://fullstack.edu.vn (miễn phí) để làm bài tập và quản lý được tiến độ học của bạn. Trong tương lai còn giúp bạn có hồ sơ đẹp trong mắt Nhà Tuyển Dụng.
    🔥 Tham gia nhóm Học lập trình tại F8 trên Facebook: https://www.facebook.com/groups/f8official/

    hoclaptrinh mienphi frontend backend devops
    ---------------------------------------
    HỌC LẬP TRÌNH MIỄN PHÍ
    1. Khóa Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
    2. Khóa HTML, CSS: https://fullstack.edu.vn/courses/html-css
    3. Khóa Responsive web design: https://fullstack.edu.vn/courses/responsive-web-design
    4. Khóa Xây dựng web với NodeJS & ExpressJS: https://fullstack.edu.vn/courses/nodejs
    ---------------------------------------
    LIÊN KẾT HỮU ÍCH
    1. Học lập trình: http://fullstack.edu.vn
    2. Viết CV xin việc: http://mycv.vn
    3. Danh sách phát Youtube: https://www.youtube.com/channel/UCNSCWwgW-rwmoE3Yc4WmJhw/playlists
    -----------------------------------------------------------
    LIÊN HỆ
    1. Facebook: https://fb.com/sondnmc
    2. Email: sondnf8@gmail.com

    Yêu các bạn ❤️

Khung JavaScript: Cách lựa chọn

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 1401 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript là một trong những ngôn ngữ cơ bản được sử dụng phổ biến nhất của Internet. Theo một khảo sát , JavaScript là ngôn ngữ hàng đầu trong số các nhà phát triển front-end và dường như…

Cách chọn Trình soạn thảo JavaScript tốt nhất để phát triển web

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 1700 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu Có một số tùy chọn cho các nhà phát triển đang tìm kiếm một trình soạn thảo JavaScript tốt cung cấp môi trường làm việc hiệu quả và dễ chịu hơn.

JavaScript: trường hợp chuyển đổi - tùy chọn lựa chọn

  • Tác giả: vi.birmiss.com
  • Đánh giá: 4 ⭐ ( 5704 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Kích hoạt JavaScript trong các trình duyệt

  • Tác giả: quantrimang.com
  • Đánh giá: 3 ⭐ ( 1267 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tất cả các trình duyệt hiện đại đi kèm với hỗ trợ có sẵn cho JavaScript. Thường thì, bạn có thể cần thao tác để enable (kích hoạt) hoặc disable (vô hiệu hóa) hỗ trợ này. Chương này giải thích thủ tục để kích hoạt và vô hiệu hóa hỗ trợ JavaScript trong trình duyệt của bạn: Internet Explorer, Firefox, Chrome, và Opera.

[Tự học Javascript] Đối tượng trong Javascript

  • Tác giả: cafedev.vn
  • Đánh giá: 3 ⭐ ( 5874 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Như chúng ta đã biết từ chương Kiểu dữ liệu, có tám loại dữ liệu trong JavaScript. Bảy cái trong số họ được gọi là kiểu nguyên thủy, vì giá trị của nó chỉ chứa một thứ duy nhất (có thể là một chuỗi hoặc một số hoặc bất cứ thứ gì).Ngược lại, các đối tượng được sử dụng để lưu trữ các bộ sưu tập có kiểu các dữ liệu khác nhau và các thực thể phức tạp hơn.

Thêm tùy chọn để chọn bằng javascript

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 1664 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Bạn có thể đạt được điều này với một forvòng lặp đơn giản : var min…

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  SQL KHÔNG ĐẦY ĐỦ - sql không null