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



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ụ

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

<select id="selecteId">
               <tùy chọn giá trị="0"><Please selectoption>
               <tùy chọn giá trị="1"><Option 1option>
               <tùy chọn giá trị="2"><Option 2option>
        chọn>

 

mã Javascript

var selId = tài liệu. getElementById( "selecteId" );
       selId. value = "2";//Đặt tùy chọn đã chọn thành 2, là Tùy chọn 2

 

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">
               <tùy chọn id="0"><Please selectoption>
               <tùy chọn id="1"><Option 1option>
               <tùy chọn id="2"><Option 2option>
        chọn>

 

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 select

1. 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" );
        var items = selId. tùy chọn; //Javascript nhận được chọn tất cả tùy chọn

for ( var i = 0; i < item. chiều dài;
               if (items[i]. giá trị == "1" ) {
cảnh báo (mục [i]. chữ);
}
}

 

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" );
        var items = selId. bên trongHTML;

 

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