Làm cách nào để thay đổi tùy chọn đã chọn bằng JavaScript?

❮ Chọn đối tượng

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ụng

Thuộ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ệt

Giá trị tài sản Có Có Có Có Có

cú pháp

Trả 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ản

ValueDescriptionvalueChỉ định giá trị của một

chi tiết kỹ thuật

Giá trị trả về. Một chuỗi, đại diện cho giá trị của thuộc tính giá trị của một

Thê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 JQuery

Trong 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

    Argentina
    Brazil
    England
    Ireland
    United States



select['countries', 'Ireland'];

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 JQuery

Nế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ụ

    Argentina
    Brazil
    England
    Ireland
    United States

Đâ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ọn

1. Đặ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