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

Bạn đang xem : js chọn giá trị đặt

Để 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:

< p class = "ezoic-ad banner-1 banner-1124 adtester-container adtester-container-124">

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

===

văn bản

)

;




$ select

.

value

=

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ủ đề js chọn giá trị đặt

How to Make JavaScript Dropdown List

alt

  • Tác giả: Internet Services and Social Networks Tutorials from HowTech
  • Ngày đăng: 2013-07-13
  • Đánh giá: 4 ⭐ ( 8675 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Follow this step by step guide to learn how to make a drop down menu and integrate it with a raw java script.

    Don't forget to check out our site http://howtech.tv/ for more free how-to videos!
    http://youtube.com/ithowtovids - our feed
    http://www.Facebook.com/howtechtv - join us on Facebook
    https://plus.google.com/103440382717658277879 - our group in Google+

    Drop down menus are nowadays integrated with functions which enhance the web usage. In this tutorial, we will learn how to make javascript dropdown list.

    Step 1 -- Enter the code for the List

    After the "body" and "html" tags, start with "form" tag. Give a title to the drop down menu. For the purpose of this tutorial, we want to make a drop down list from where people can choose their favorite sport.

    Next, open up the "select" tag and give it an id. Then give a function name for changing the list. For that, we have used the "on change" keyword and specified the function as favsports(). Just ignore the function for now as we will define its working later on.

    Once done with that, insert the different options for your drop down menu. Enclose these options between "option" tags. Once completed, close the select tag.

    Next, specify a narration for the output in the "p" tag. Choose the character type as text. For the purpose of this tutorial, we will name it as favorite and will specify its size as twenty. With that done, close the form tag.

    Step 2 -- Coding for the function

    Now open the script tag right above the body tag. Right beneath the script tag, we will begin with our function definition. In order to do so, specify your function name along with the function keyword, insert parenthesis and then start with the actual definition enclosed in curly brackets.

    In the function body, we will first explain the chosen element of menu. We are using a function of "get element by id" and specifying the element within the parameters from which we have to pick up the value, which is of course our javascript dropdown menu. It has already been named as mylist earlier.

    The next line is about displaying the selected option in a text box. For this purpose, we are using the "selected index" function and then passing the value to the text box, which we have named as favorite, with the "get element by id" method.

    Once you are done, close the script tag and then save the file as html document.

    Step 3 -- Open the file

    Now open up any browser and open the file that you just saved. The javascript dropdown list that you created will be available there. Simply choose any option from the dropdown list and it will appear in the text field right below.

    In this manner, you can create javascript dropdown list.

Lấy giá trị của thẻ Select Multiple bằng Javascript - Bài tập Javascript

  • Tác giả: code24h.com
  • Đánh giá: 4 ⭐ ( 4614 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giả sử bạn đang xây dựng một trang tin tức cho phép người dùng chọn nhiều chuyên mục khi đăng bài viết, lúc này bạn sẽ phải lụa chọn một là hiển thị chuyên mục dạng checkbox, hai là hiển thị chuyên mục dạng select box nhưng hiển thị multiple. Bài toán đặt ra là làm sao để biết người dùng đã chọn ...

Data types trong JavaScript

  • Tác giả: websitehcm.com
  • Đánh giá: 3 ⭐ ( 3655 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Data types trong JavaScript w3seo các kiểu dữ liệu trong JavaScript, cách sử dụng data types trong JavaScript, lưu ý cơ bản

Bàn về JS - Các giá trị đặc biệt trong JavaScript

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 4475 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong JavaScript có một số giá trị đặc biệt mà các developer cần chú ý và sử dụng một cách đúng đắn hơn. Có thể có người đã biết hoặc chưa biết. Bài viết sau đây xin đúc kết một số trường hợp.

JavaScript Tính các giá trị của một tam giác

  • Tác giả: www.javascriptbank.com
  • Đánh giá: 5 ⭐ ( 3253 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Với sự trợ giúp của đoạn mã JavaScript này, bạn sẽ không còn phải ghi n...JavaScript Tính các giá trị của một tam giác - Tính các giá trị của một tam giác - Ngôn ngữ: tiếng Việt

Cách lấy giá trị của thẻ select trong JavaScript cho người mới

  • Tác giả: vn.got-it.ai
  • Đánh giá: 3 ⭐ ( 5551 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ select sẽ tạo nên một drop-down list giúp người dùng tương tác với website. Cùng tìm hiểu thẻ select là gì và cách lấy giá trị của thẻ select trong JavaScript qua bài viết.

Những cách lấy giá trị checkbox bằng JavaScript đơn giản nhất

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

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  Google Analytics là gì? Cách dùng Google Analytics hiệu quả - thống kê truy cập wordpress

By ads_php