Để thay đổi tùy chọn đã chọn trong phần tử HTML
const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
5, chúng tôi phải thay đổi thuộc tính const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
6 trên phần tử const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
5 hoặc thuộc tính const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
1 trên phần tử const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
2 mà chúng tôi muốn chọnCó 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ẽ phụ thuộc vào thông tin chúng tôi có sẵn cho mình. Nó có thể là văn bản được hiển thị trên phần tử
const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
3, chỉ mục của nó, const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
4 của nó, v.v.Hãy xem 6 cách khác nhau để thay đổi tùy chọn đã chọn bằng JavaScript
1. Thay đổi tùy chọn đã chọn theo giá trị
Để thay đổi tùy chọn đã chọn bằng thuộc tính
const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
6, tất cả những gì chúng ta phải làm là thay đổi thuộc tính const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
6 của phần tử const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
5Hộ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ễ nhất và đơn giản nhất để cập nhật trạng thái hộp chọn
Giả sử chúng ta muốn chọn tùy chọn có chứa thuộc tính
const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
8
Ann Frank
Paul Allen
Steve Jobs
Tất cả những gì chúng ta phải làm là đặt giá trị của hộp chọn thành cùng giá trị đó
const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
Xem Bút trên CodePen
2. Thay đổi tùy chọn đã chọn bằng văn bản tùy chọn
Chúng tôi cũng có thể muốn thay đổi giá trị của hộp chọn bằng văn bản của phần tử
const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
2 được hiển thị cho khách truy cậpLàm điều này có lẽ là cách phức tạp nhất, tuy nhiên, một cái gì đó tương đối đơn giản để làm. 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ử mà 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
const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
1 của nó và đặt nó thành const changeSelected = [e] => {
const text = 'Steve Jobs';
const $select = document.querySelector['#mySelect'];
const $options = Array.from[$select.options];
const optionToSelect = $options.find[item => item.text ===text];
optionToSelect.selected = true;
};
1. Bằng cách này, hộp chọn cũng sẽ tự cập nhật để phản ánh thay đổi nàyGhi chú. điều này chỉ hoạt động đối với các thành phần hộp 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 thừa nhận nhiều phần tử được 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 phần tử đang hoạt động cho phần tử khác
const changeSelected = [e] => {
const text = 'Steve Jobs';
const $select = document.querySelector['#mySelect'];
const $options = Array.from[$select.options];
const optionToSelect = $options.find[item => item.text ===text];
optionToSelect.selected = 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 đầu vào nhiều 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
const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
1 của nó, chúng tôi sẽ lấy thuộc tính const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
6 của nó và sử dụng nó để đặt nó làm giá trị duy nhất cho toàn bộ hộp chọnconst changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
2Xem Bút trên CodePen
3. Thay đổi tùy chọn đã chọn theo tùy chọn id, lớp hoặc thuộc tính
Cái 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] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
3Xem 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
const changeSelected = [e] => {
const text = 'Steve Jobs';
const $select = document.querySelector['#mySelect'];
const $options = Array.from[$select.options];
const optionToSelect = $options.find[item => item.text ===text];
optionToSelect.selected = true;
};
4 thay vì const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
4 hoặc bất kỳ thuộc tính nào khác như const changeSelected = [e] => {
const text = 'Steve Jobs';
const $select = document.querySelector['#mySelect'];
const $options = Array.from[$select.options];
const optionToSelect = $options.find[item => item.text ===text];
optionToSelect.selected = true;
};
6. Chỉ cần thay đổi truy vấn để lấy phần tử tùy chọnconst changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
74. Thay đổi tùy chọn đã chọn theo chỉ mục
Nếu tất cả những gì chúng ta có là chỉ mục của phần tử tùy chọn, chúng ta có thể đặt thuộc tính
const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
1 bằng cách truy xuất hộp tùy chọn const changeSelected = [e] => {
const text = 'Steve Jobs';
const $select = document.querySelector['#mySelect'];
const $options = Array.from[$select.options];
const optionToSelect = $options.find[item => item.text ===text];
optionToSelect.selected = true;
};
8. Sau đó, chúng ta chỉ phải chọn cái chúng ta 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ử
const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
2 đầu tiên sẽ có chỉ số const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
20, phần tử tiếp theo là const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
21, v.v.Biết được điều này, nếu chúng ta muốn chọn phần tử thứ 3, chúng ta sẽ sử dụng chỉ số 2 trong mã của mình để chọn phần tử đó
const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
3Hã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 để hoạt động cho các đầu vào đa lựa chọn
const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
4Phần 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ử
const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
5 của mình, tốt hơn hết bạn nên cập nhật thuộc tính const changeSelected = [e] => {
const $select = document.querySelector['#mySelect'];
$select.value = 'steve'
};
6 nếu bạn muốn chọn một phần tử duy nhất. Mặt khác, 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ử đang hoạt động mà chỉ thêm một phần tử khácNếu bạn đang học JavaScript và điều này có vẻ hơi khó khăn với bạn, không có gì phải lo lắng cả. Cuối cùng, bạn sẽ đến đó. Xem mất bao lâu để học JavaScript và đâu là cách tốt nhất để học JavaScript