Làm cách nào để thay đổi tùy chọn đã chọn bằng JavaScript?
❮ Chọn đối tượng Show
Thí dụThay đổi tùy chọn đã chọn thành "chuối" tài liệu. getElementById("mySelect"). giá trị = "chuối"; Tự mình thử »Định nghĩa và cách sử dụngThuộc tính giá trị đặt hoặc trả về giá trị của tùy chọn đã chọn trong danh sách thả xuống Hỗ trợ trình duyệtGiá trị tài sản Có Có Có Có Cócú phápTrả về thuộc tính giá trị Đặt thuộc tính giá trị chọn đối tượng. giá trị = giá trị Giá trị tài sảnValueDescriptionvalueChỉ định giá trị của mộtchi tiết kỹ thuậtGiá trị trả về. Một chuỗi, đại diện cho giá trị của thuộc tính giá trị của mộtThêm ví dụThí dụTrả về giá trị của tùy chọn đã chọn trong danh sách thả xuống var x = tài liệu. getElementById("mySelect"). giá trị; Tự mình thử »❮ Chọn đối tượng Đây là một hướng dẫn JavaScript ngắn về cách thay đổi tùy chọn đã chọn của một phần tử HTML được chọn. Trong bài đăng này, tôi sẽ chỉ cho bạn cách thực hiện có và không có JQuery Thay đổi một tùy chọn đã chọn mà không cần JQueryTrong ví dụ này, tôi sẽ sử dụng vanilla JavaScript. Mặc dù thư viện JQuery rất tuyệt, nhưng bạn có thể rơi vào tình huống không có quyền truy cập vào thư viện đó. Nó cũng không phải là một ý tưởng tuyệt vời để bao gồm toàn bộ thư viện chỉ vì mục đích thay đổi một phần tử được chọn Hãy xem chức năng JavaScript tùy chỉnh mà tôi đã viết //Custom function that changes a select element's option. function select(selectId, optionValToSelect){ //Get the select element by it's unique ID. var selectElement = document.getElementById(selectId); //Get the options. var selectOptions = selectElement.options; //Loop through these options using a for loop. for (var opt, j = 0; opt = selectOptions[j]; j++) { //If the option of value is equal to the option we want to select. if (opt.value == optionValToSelect) { //Select the option and break out of the for loop. selectElement.selectedIndex = j; break; } } } Hàm JavaScript ở trên có hai tham số. ID duy nhất của phần tử được chọn của chúng tôi và giá trị mà chúng tôi muốn chọn. Bên trong chức năng của chúng tôi, chúng tôi lặp qua từng tùy chọn trong phần tử chọn. Nếu giá trị của tùy chọn khớp với giá trị mà chúng tôi muốn chọn, chúng tôi sẽ thay đổi Chỉ mục đã chọn của phần tử và thoát ra khỏi vòng lặp for Một ví dụ về chức năng này đang được sử dụng với danh sách thả xuống chứa danh sách tên quốc gia Trong ví dụ trên, tôi đã sử dụng chức năng tùy chỉnh để chọn Ireland Thay đổi tùy chọn đã chọn bằng JQueryNếu bạn đã sử dụng thư viện JavaScript JQuery, thì bạn có thể làm điều gì đó như thế này //We want to select Ireland. var optionToSelect = 'Ireland'; //Change the #countries select element to the Ireland option. $('#countries option:contains(' + optionToSelect + ')').attr('selected', 'selected'); Trong mã JQuery ở trên, chúng tôi đã thay đổi tùy chọn phần tử được chọn thành “Ireland” bằng cách sử dụng phương thức attr. Tuy nhiên, bạn cũng có thể sử dụng phương pháp chống đỡ var optionToSelect = 'Ireland'; $('#countries option:contains(' + optionToSelect + ')').prop({selected: true}); Trong một số trường hợp, thuộc tính giá trị của bạn có thể khác với nội dung của từng tùy chọn Một ví dụ Đây là trường hợp phổ biến khi bạn đang xử lý các phần tử chọn lọc được điền từ cơ sở dữ liệu hoặc một mảng. Trong trường hợp này, bạn có thể sử dụng đoạn mã JQuery sau //Ireland is 3 in our select element. var valueToSelect = 3; $('#countries').val(valueToSelect); Trong đoạn mã trên, chúng tôi đã thay đổi phần tử select của mình bằng cách sử dụng phương thức val. Chúng tôi đặt nó thành 3 vì tùy chọn Ireland trong danh sách của chúng tôi có thuộc tính giá trị là 3 Hộp danh sách thả xuống chọn thường do người dùng chọn, nhưng đôi khi nó cần được chọn bằng javascript, chẳng hạn như khi khôi phục mục do người dùng chọn. Trong hầu hết các trường hợp, các mục do người dùng chọn thường được khôi phục ở chế độ nền, nhưng để tiết kiệm tài nguyên máy chủ, đôi khi chúng cũng được khôi phục ở máy khách bằng javascript Ngoài việc sử dụng javascript để khôi phục giá trị đã chọn của người dùng, đôi khi tất cả các tùy chọn được chọn đều có. Tùy theo nhu cầu, bạn có thể tìm thấy một giá trị trong tất cả các tùy chọn, hoặc bạn có thể lưu tạm thời tất cả các tùy chọn vào máy khách, để chúng tôi có thể khôi phục tùy chọn đã mất sau khi người dùng nhấp vào một nút được áp dụng nhất định
I. Javascript đặt tùy chọn đã chọn1. Đặt tùy chọn đã chọn với giá trị Phương pháp đặt tùy chọn javascript được chọn hoàn toàn giống với nền. Mã html như sau <select id="selecteId">
mã Javascript var selId = tài liệu. getElementById( "selecteId" );
2. Đặt tùy chọn đã chọn với số sê-ri tùy chọn selId. tùy chọn[2]. đã chọn = true ; //Đặt mục thứ ba thành tùy chọn hiện tại, tôi. e. Tùy chọn 2
3. Đặt tùy chọn đã chọn với chỉ mục tùy chọn selId. selectIndex = 2; //Đặt mục thứ ba thành tùy chọn hiện tại, tức là Tùy chọn 2
4. Đặt tùy chọn đã chọn với id hoặc tênItem của tùy chọn Khi tùy chọn được chọn có id, bạn có thể sử dụng id hoặc tênItem để đặt tùy chọn hiện tại. Mã html như sau <select id="selecteId">
Mã Javascript (đặt mục thứ ba thành tùy chọn hiện tại, tôi. e. Lựa chọn 2) tài liệu. getElementById( "2" ). đã chọn = true ; Hoặc là selId. tùy chọn. nameItem( "2" ). đã chọn = true ;
II. Ba trường hợp duyệt tất cả các tùy chọn trong select1. Javascript chọn tìm tùy chọn theo giá trị Lấy phần chọn ở trên làm ví dụ, mã javascript như sau var selId = tài liệu. getElementById( "selecteId" ); for ( var i = 0; i < item. chiều dài;
2. Lưu tạm thời tất cả các tùy chọn của select Khi người dùng nhấn vào nút upload file mà không refresh, sau khi upload xong sẽ mất hết các tùy chọn đã chọn. Tại thời điểm này, tất cả các tùy chọn được lưu tạm thời trong ứng dụng khách để khôi phục dữ liệu trước khi tải lên lựa chọn, mã javascript hiển thị như bên dưới Trước khi nhấp vào nút, hãy tạm thời lưu tất cả các mã tùy chọn đã chọn var selId = tài liệu. getElementById( "selecteId" );
Sau khi nhấp vào nút, khôi phục tất cả các mã tùy chọn đã chọn selId. InternalHTML = mục; Đoạn mã trên là để tạm thời lưu văn bản bên trong của select (tức là InternalHTML), đơn giản và hiệu quả; . giá trị = "chọn giá trị" Làm cách nào để thay đổi giá trị thả xuống đã chọn bằng JavaScript?Trong JavaScript, thuộc tính selectedIndex được sử dụng để đặt giá trị của phần tử hộp chọn . Thuộc tính selectIndex đặt hoặc trả về chỉ mục của giá trị đã chọn trong danh sách thả xuống.
Làm cách nào để chọn JavaScript thả xuống tùy chọn?BƯỚC 1 – Tạo thẻ chọn với nhiều tùy chọn và gán id cho thẻ chọn. BƯỚC 2 – Ngoài ra, hãy tạo một DOM trống có id để hiển thị đầu ra. BƯỚC 3 – Tạo thành phần nút để người dùng nhấp và xem tùy chọn đã chọn. BƯỚC 4 – Cho phép người dùng chọn một tùy chọn từ danh sách thả xuống
Làm cách nào để thêm vào các tùy chọn được chọn trong JavaScript?JavaScript sử dụng loại HTMLSelectElement để đại diện cho phần tử Sử dụng phương thức add() của HTMLSelectElement để thêm tùy chọn vào phần tử . Sử dụng phương thức remove() của HTMLSelectElement để xóa tùy chọn khỏi phần tử
Làm cách nào để chọn động một tùy chọn trong JavaScript?Danh sách thả xuống chọn HTML động bằng JavaScript . Khai báo HTML Chọn phần tử Wrapper Tạo mô hình đối tượng JavaScript Thêm tùy chọn động để chọn phần tử Đính kèm sự kiện thay đổi để chọn danh sách thả xuống |