Hướng dẫn này sẽ xác định quy trình để thêm một tùy chọn từ văn bản đầu vào vào một thẻ được chọn bằng JavaScript.
Làm thế nào để thêm tùy chọn để chọn thẻ từ văn bản nhập bằng JavaScript?
Để thêm tùy chọn từ văn bản đầu vào vào thẻ được chọn bằng JavaScript, bạn có thể sử dụng các phương pháp khác nhau, chẳng hạn như:
- phương thức add () với Option Constructor
- phương thức createElement () với phương thức appendChild ()
Hãy cùng khám phá từng phương pháp một!
Phương pháp 1: Thêm tùy chọn để chọn thẻ từ văn bản nhập bằng phương thức add () với hàm tạo tùy chọn
Để thêm một tùy chọn từ văn bản đầu vào trong một thẻ đã chọn, hãy sử dụng ' cộng() 'Phương pháp với' Quyền mua ' Người xây dựng. Phương thức add () được sử dụng để thêm các phần tử vào các tùy chọn của “ HTMLSelectElement ”Còn được gọi là thẻ
Cú pháp
Thực hiện theo cú pháp được cung cấp để sử dụng phương thức add () để thêm một tùy chọn trong một thẻ đã chọn:
cộng ( tùy chọn, hiện có ) ;Đây, “ quyền mua 'Đại diện cho tùy chọn mới sẽ được thêm vào thay cho' hiện tại ”.
Thí dụ
Chúng tôi sẽ tạo một trường đầu vào, một trình đơn thả xuống bằng cách sử dụng và một nút sẽ thêm các tùy chọn mới trong một phần tử được chọn, gọi “ insertOption () ”Khi nó được nhấp vào:
< kiểu đầu vào = 'chữ' Tôi = 'txt' trình giữ chỗ = 'Nhập văn bản để thêm tùy chọn' >< chọn id = 'tùy chọn' >
< giá trị tùy chọn = 'c' > C quyền mua >
lựa chọn >
< br > < br >
< id nút = 'thêm btn' trong một cái nhấp chuột = 'insertOption ()' > Thêm tùy chọn cái nút >
Trong tệp JS, hãy xác định một hàm có tên là “ insertOption () ”Và sau đó truy cập vào nút, hộp văn bản và phần tử được chọn với id được chỉ định của chúng bằng cách sử dụng“ querySelector () ' phương pháp. Sau đó, tạo một phiên bản của tùy chọn bằng cách sử dụng phương thức khởi tạo Option và gọi phương thức add () bằng cách chuyển tùy chọn hiện có và tùy chọn mới cần được thêm vào cuối danh sách:
functioninsertOption ( ){
hăng sô addBtn = tài liệu. querySelector ( '#addbtn' ) ;
hăng sô hộp danh sách = tài liệu. querySelector ( '#tùy chọn' ) ;
hăng sô thả xuống = tài liệu. querySelector ( '#txt' ) ;
hăng sô quyền mua = Mới Quyền mua ( trình đơn thả xuống. giá trị , trình đơn thả xuống. giá trị ) ;
hộp danh sách. cộng ( tùy chọn, không xác định ) ;
trình đơn thả xuống. giá trị = '' ;
trình đơn thả xuống. tiêu điểm ( ) ;
}
Kết quả cho thấy rằng tùy chọn mới từ trường văn bản được thêm vào cuối trình đơn thả xuống:
Ghi chú: Bạn có thể sử dụng phương pháp này để thêm tùy chọn vào đầu thẻ chọn bằng cách thêm giá trị của tùy chọn hiện có dưới dạng tham số thứ hai thay vì không xác định. Nó sẽ thêm tùy chọn mới trước tùy chọn hiện có.
Hãy chuyển sang phương pháp khác!
Phương pháp 2: Thêm tùy chọn để chọn thẻ từ văn bản nhập bằng phương thức createElement () Với appendChild ()
Có một cách tiếp cận khác mà bạn có thể tạo một phần tử mới bằng cách sử dụng “ createElement () ”Với phương pháp“ appendChild () ' phương pháp. Bằng cách sử dụng phương pháp này, chúng tôi sẽ thêm các tùy chọn ở đầu thẻ chọn.
Cú pháp
Sử dụng cú pháp sau để thêm tùy chọn trong thẻ chọn từ văn bản đầu vào bằng phương thức appendChild ():
appendChild ( newOptionValue ) ;Thí dụ
Tại đây, chúng tôi sẽ tạo một danh sách thả xuống bằng cách thêm hai tùy chọn “ C ' và ' C ++ ”, Một trường đầu vào và một nút sẽ gọi hàm JavaScript do người dùng xác định có tên là“ insertOption () ”Khi sự kiện onclick của nó được kích hoạt:
< kiểu đầu vào = 'chữ' Tôi = 'txt' trình giữ chỗ = 'Nhập văn bản để thêm tùy chọn' >< chọn id = 'thả xuống' >
< quyền mua > C quyền mua >
< quyền mua > C ++ quyền mua >
lựa chọn >
< br > < br >
< nút onclick = 'insertOption ();' > Thêm tùy chọn cái nút >
Trong một chức năng có tên “ insertOption () ”, Trước tiên hãy truy cập vào phần tử select và trường văn bản bằng cách sử dụng id được chỉ định của chúng và sau đó, gọi các phương thức createElement () và createTextNode () để tạo một phiên bản tùy chọn và tìm nạp giá trị văn bản dưới dạng một tùy chọn. Sau đó, gọi phương thức appendChild () và chuyển giá trị văn bản dưới dạng một tùy chọn, sau đó thêm tùy chọn này vào đầu danh sách lựa chọn bằng cách sử dụng “ insertBefore () ”Với phần tử chọn:
functioninsertOption ( ){
var select = tài liệu. getElementById ( 'thả xuống' ) ,
textValue = tài liệu. getElementById ( 'txt' ) . giá trị ,
newOption = tài liệu. createElement ( 'Quyền mua' ) ,
newOptionValue = tài liệu. createTextNode ( textValue ) ;
newOption. appendChild ( newOptionValue ) ;
lựa chọn. insertBefore ( newOption, chọn. firstChild ) ;
}
Như bạn có thể thấy rằng đầu ra cho thấy rằng tùy chọn mới từ trường văn bản được thêm vào ở đầu trình đơn thả xuống:
Chúng tôi đã biên soạn tất cả các giải pháp khả thi để thêm các tùy chọn từ văn bản đầu vào vào thẻ chọn.
Sự kết luận
Để thêm tùy chọn từ văn bản đầu vào vào một thẻ được chọn bằng JavaScript, bạn có thể sử dụng các phương thức JavaScript tích hợp sẵn, bao gồm phương thức add () hoặc phương thức appendChild (). Bạn có thể thêm các tùy chọn trong thẻ chọn ở đầu danh sách cũng như cuối danh sách. Trong hướng dẫn này, chúng tôi đã xác định quy trình để thêm tùy chọn từ văn bản đầu vào vào thẻ được chọn bằng JavaScript với các ví dụ chi tiết.