Hướng dẫn javascript choice

Bạn có định hướng phát triển thành lập trình viên ngôn ngữ JavaScript? Nếu có thì bạn hẳn bạn sẽ phải học lấy giá trị của thẻ select trong JavaScript.

Nội dung chính Show

1. Thẻ select trong HTML là gì?
2. Cách tạo thẻ select đơn giản trong HTML
3. Hướng dẫn cách lấy giá trị của thẻ select trong JavaScript cho người mới
Lấy giá trị của thẻ select trong JavaScript
Lấy giá trị của thẻ select khi có nhiều option được chọn trong JavaScript
Bắt sự kiện select trong JavaScript
Thêm option vào select trong JavaScript
Tổng kết

Thẻ select sẽ tạo ra drop-down list giúp người dùng lựa chọn một thông tin cụ thể. Bởi vậy, chức năng này sẽ giúp bạn tương tác với website nhanh chóng và hiệu quả hơn. Hãy cùng Got It tìm hiểu cách lấy giá trị thẻ select trong JavaScript trong bài viết hôm nay nhé!.

Mục lục

1. Thẻ select trong HTML là gì?
2. Cách tạo thẻ select đơn giản trong HTML
3. Hướng dẫn cách lấy giá trị của thẻ select trong JavaScript cho người mới

1. Thẻ select trong HTML là gì?

Thẻ select là một thẻ thường được sử dụng trong HTML. Các thẻ select là thành phần cấu tạo nên form giúp thu thập thông tin từ người dùng. Bên trong các thẻ select là các thẻ option, nơi các lập trình viên tạo ra các lựa chọn. Khi hiển thị lên website, các thẻ select này chính là các dropdown list. Mỗi khi người dùng click vào drop-down list, một loạt các lựa chọn sẽ đổ xuống, người dùng sau đó sẽ chọn 1 trong các lựa chọn này.

Thẻ Select là gì

Một ví dụ điển hình về thẻ select là lựa chọn độ tuổi. Người dùng chỉ cần click vào down down list được tạo nên từ thẻ select là có thể chọn tuổi. Tính năng này giúp người dùng không phải mất công nhập thủ công tuổi của mình. Sau khi người dùng lựa chọn 1 option, các lập trình viên sẽ cần phải lấy giá trị của thẻ select trong JavaScript. Mục đích của việc này là để phục vụ tính toán hay lưu trữ thông tin.

2. Cách tạo thẻ select đơn giản trong HTML

Trước khi học cách lấy giá trị thẻ select trong JavaScript, bạn phải biết cách tạo thẻ select. Để tạo thẻ select trong HTML, bạn hãy dùng đoạn code sau:

Cách tạo và lấy giá trị của thẻ select

Trong đó, cặp thẻ sẽ dùng để bọc các option và định dạng drop down list. Các thẻ ở trong là các lựa chọn mà người dùng có thể chọn. Thuộc tính id giúp lập trình viên xác định được thẻ select để sau này thao tác với thẻ này. Thuộc tính value là giá trị trả về khi lấy giá trị thẻ select trong JavaScript. Tùy thuộc vào mục đích của mỗi dự án mà bạn có thể đặt value khác nhau. Thuộc tính selected sẽ quy định lựa chọn mặc định được chọn ban đầu.

3. Hướng dẫn cách lấy giá trị của thẻ select trong JavaScript cho người mới

Bạn có thể lấy giá trị của thẻ select bằng nhiều cách khác nhau. Tuy nhiên, cách phổ biến nhất là dùng getElementById và hàm value. Bạn hãy dùng đoạn code dưới đây:

Cách lấy giá trị của thẻ select

document.getElementById(“Mã_id_của_thẻ_select”).value;

Đoạn code trên sẽ trả về giá trị value của option mà người dùng chọn trong thẻ select. Ví dụ người dùng chọn “Lựa chọn 1”, đoạn code trên sẽ trả về giá trị là “1”. Nếu bạn muốn giá trị trả về là “Lựa chọn 1”, hãy dùng đoạn code sau:

Let e = document.getElementById(“Mã_id_của_thẻ_select”);
Let giaTri = e.options[e.selectedIndex].text;

Khi đó, giaTri sẽ trả về kết quả “Lựa chọn 1”.

Với những cách trên bạn đã có thể lấy giá trị của thẻ select khi muốn xuất dữ liệu trong JavaScript. Thẻ select là một trong những thẻ quan trọng của HTML. Đây là thành phần cấu tạo nên form giúp người dùng tương tác với website. Biết cách lấy giá trị của thẻ select trong JavaScript sẽ giúp ích rất nhiều cho lập trình viên.

Hiện tại, Got It đang tuyển dụng các vị trí Software Engineer sử dụng JavaScript. Bạn có thể tham khảo tại đây hoặc subscribe chúng mình để không bỏ lỡ những tin tức mới nhất nhé!

Hướng dẫn cách lấy giá trị của thẻ select bằng JavaScript. Thẻ select được sử dụng để tạo drop down menu và bạn sẽ biết cách lấy giá trị thẻ select, cách băt Sự kiện select trong Javascript cũng như cách thêm option vào select trong JavaScript sau bài học này.

Để tạo drop down menu bằng thẻ select trong HTML, chúng ta sử dụng tới thuộc tính option của thẻ select như sau:

<select>
<option>Orangeoption>
<option>Lemonoption>
<option>Strawberryoption>
select>

Chúng ta có thể sử dụng kèm thẻ label để hiển thị dòng ký tự phía trước drop down menu như sau:

<label for="fruit">Hãy lựa chọnlabel>
<select id="fruit">
<option>Orangeoption>
<option>Lemonoption>
<option>Strawberryoption>
select>

Hãy lựa chọn

Để có thể biết option nào đang được lựa chọn, hãy đặt giá trị value cho các option bằng các giá trị khác nhau như sau:

<label for="fruit">Hãy lựa chọnlabel>
<select id="fruit">
<option value="orange">Orangeoption>
<option value="lemon">Lemonoption>
<option value="strawberry">Strawberryoption>
select>

Hãy lựa chọn

Để đặt một trong các option được chọn theo mặc định, hãy đặt thuộc tính selected trên option đó như sau:

<label for="fruit">Hãy lựa chọnlabel>
<select id="fruit">
<option value="orange">Orangeoption>
<option value="lemon" selected>Lemonoption>
<option value="strawberry">Strawberryoption>
select>

Hãy lựa chọn

Để có thể lựa chọn nhiều option cùng lúc, hãy đặt thuộc tính multiple cho thẻ select như sau:

<label for="fruit">Hãy lựa chọnlabel>
<select id="fruit" multiple>
<option value="orange">Orangeoption>
<option value="lemon" selected>Lemonoption>
<option value="strawberry" selected>Strawberryoption>
select>

Hãy lựa chọn

Lấy giá trị của thẻ select trong JavaScript

Để lấy giá trị của thẻ select trong JavaScript, chúng ta sử dụng tới thuộc tính value của HTMLSelectElement Object, là đối tượng đại diên cho select Element với cú pháp sau đây:

element.value

Trong đó element là Element chỉ đến select được lấy từ trong DOM thông qua một số phương thức, ví dụ như getelementbyid chẳng hạn.

Khi đó, giá trị value của option đang được lựa chọn trong drop down menu tạo bởi thẻ select sẽ được trả về.

Ví dụ, để lấy giá trị của thẻ select có id = myselect, chúng ta viết như sau:

let element = document.getElementById('myselect');
console.log(element.value);

Với HTMLSelectElement Object thu về, bằng cách sử dụng thuộc tính element.options, chúng ta có thể lấy danh sách các option có trong thẻ select, sau đó có thể tham chiếu đến từng opiton thông qua index của nó.

Ví dụ, chúng ta có thể tham chiếu tới option chỉ định và đặt giá trị selected cho option đó bằng các giá trị true false như sau:

let element = document.getElementById('myselect');
let options = element.options;
options[1].selected = true;

Sau đây hãy cùng xem demo cách Lấy giá trị của thẻ select trong JavaScript với mã HTML dưới đây:

html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sampletitle>
head>
<body>

<p>Samplep>

<label for="fruit">Hãy lựa chọnlabel>
<select id="fruit">
<option value="orange">Orangeoption>
<option value="lemon" selected>Lemonoption>
<option value="strawberry">Strawberryoption>
select>

<div>
<input type="button" value="Check" id="checkButton">
div>

<script>
function buttonClick(){
  console.log('Option được chọn có giá trị: ' + fruitSelect.value);
}

let fruitSelect = document.getElementById('fruit');
fruitSelect.options[2].selected = true;

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', buttonClick);
script>

body>
html>

Với mã lệnh này, chúng ta đã tạo ra 1 drop down menu bằng thẻ select, với 3 option để người dùng lựa chọn, và một nút check để lấy giá trị của thẻ select. Trong đó, option thứ 3 được đặt ở trạng thái selected bằng cách sử dụng fruitSelect.options[2].selected = true.

Bạn có thể lựa chọn một option từ bên trong thẻ select, sau đó lấy giá trị của option đã lựa chọn này bằng cách click vào nút check như sau:

Lấy giá trị của thẻ select khi có nhiều option được chọn trong JavaScript

Để lấy giá trị của thẻ select khi có nhiều option được chọn trong JavaScript, chúng ta sử dụng tới thuộc tính selectedOptions của HTMLSelectElement Object, là đối tượng đại diện cho select Element với cú pháp sau đây:

element.selectedOptions

Khi đó, danh sách các option đang được chọn trong thẻ select sẽ được trả về. Chúng ta có thể tham chiếu tới từng option trong đó để lấy giá trị của chúng, với mã lệnh sau đây:

let element = document.getElementById('myselect');
let selectOptions = element.selectedOptions;
for (let i = 0 ; i > selectOptions.length ; i++){
    console.log(selectOptions[i].value);
}

Sau đây hãy cùng xem demo cách lấy giá trị của thẻ select khi có nhiều option được chọn trong JavaScript với mã HTML dưới đây:

html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sampletitle>
head>
<body>

<p>Samplep>

<label for="fruit">Hãy lựa chọnlabel>
<select id="fruit" multiple size="5">
<option value="orange" selected>Orangeoption>
<option value="lemon">Lemonoption>
<option value="strawberry">Strawberryoption>
<option value="banana" selected>Bananaoption>
<option value="apple">Appleoption>
select>

<div>
<input type="button" value="Check" id="checkButton">
div>

<script>
function butotnClick(){
  let selectOptions = fruitSelect.selectedOptions;

  console.log('Các Option đang được lựa chọn:') ;
  for (let i = 0 ; i < selectOptions.length ; i++){
    console.log(selectOptions[i].value);
  }
  
}

let fruitSelect = document.getElementById('fruit');

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
script>

body>
html>

Sau khi click vào nút check, các option đang được lựa chọn sẽ được xuất ra màn hình console như sau:

Bắt sự kiện select trong JavaScript

Khi chúng ta chọn một option mới trong thẻ select, sự kiện change sẽ xảy ra.

Xem thêm: Sự kiện change trong JavaScript

Do vậy, chúng ta có thể bắt sự kiện select trong JavaScript thông qua sự kiện change để xử lý thẻ select.

Ví dụ chúng ta có mã để xử lý sự kiện change như sau:

<select id="fruit">
・・・
select>

<script>
function valueChange(){
    
}

let element = document.getElementById('fruit');
element.addEventListener('change', valueChange);
script>

Sau đây là demo về cách bắt sự kiện select trong JavaScript:

html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sampletitle>
head>
<body>

<p>Samplep>

<label for="fruit">Hãy lựa chọnlabel>
<select id="fruit">
<option value="orange">Orangeoption>
<option value="lemon">Lemonoption>
<option value="strawberry">Strawberryoption>
select>

<script>
function valueChange(){
  console.log('Option có giá trị ' + fruitSelect.value + ' đã được lựa chọn');
}

let fruitSelect = document.getElementById('fruit');
fruitSelect.options[2].selected = true;
fruitSelect.addEventListener('change', valueChange);
script>

body>
html>

Với mã lệnh này, chúng ta đã tạo ra 1 drop down menu bằng thẻ select, với 3 option để người dùng lựa chọn như sau:

Khi lựa chọn một option mới từ trong thẻ select, sự kiện change xảy ra giúp chúng ta bắt sự kiện select và lấy giá trị select selected trong JavaScript như sau:

Thêm option vào select trong JavaScript

Để thêm option vào select trong JavaScript, chúng ta có thể sử dụng tới phương thức createElement và appendChild mà Kiyoshi đã giới thiệu trong chuyên đề về DOM.

Xem thêm: createElement trong JavaScript
Xem thêm: appendChild trong JavaScript

Về cách làm, chúng ta sẽ tạo ra option mới bằng phương thức createElement, rồi chỉ định giá trị thuộc tính text và value cho nó.

Sau đó chỉ việc dùng phương thức appendChild để thêm opption này vào select ban đầu là xong.

Ví dụ chúng ta có thẻ select với các option sau:

<label for="fruit">Hãy lựa chọnlabel>
<select id="fruit">
<option value="orange">Orangeoption>
<option value="lemon">Lemonoption>
<option value="strawberry">Strawberryoption>
select>

Để thêm một option vào select trên, chúng ta viết:

function addOption() {
  
  var select = document.getElementById("fruit");
  
  
  var option = document.createElement("option");

  option.text = 'melon';
  option.value = 'Melon';

  
  select.appendChild(option);
}

Sau đây hãy cùng xem demo về cách Thêm option vào select trong JavaScript:

html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sampletitle>
head>
<body>

<p>Samplep>

<label for="fruit">Hãy lựa chọnlabel>
<select id="fruit">
<option value="orange">Orangeoption>
<option value="lemon" selected>Lemonoption>
<option value="strawberry">Strawberryoption>
select>

<div>
<input type="button" value="Check" id="checkButton">
div>

<script>
function buttonClick(){
  
  var select = document.getElementById("fruit");
  
  
  var option = document.createElement("option");

  option.text = 'melon';
  option.value = 'Melon';

  
  select.appendChild(option);
}

let fruitSelect = document.getElementById('fruit');
fruitSelect.options[2].selected = true;

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', buttonClick);
script>

body>
html>

Với mã lệnh HMTL này, ban đầu chúng ta có 1 thẻ select với 3 option sau:

Sau khi click vào nút add, option mới với giá trị value = Melon đã được thêm vào cuối thẻ select như sau:

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về thẻ select trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creativecommons</a> và <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" target="_blank" rel="noopener" href="https://www.dmca.com/Protection/Status.aspx?ID=1631afcd-7c4a-467d-8016-402c5073e5cd" class="dmca-badge">DMCA</a><script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js">

Bài viết liên quan

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> học javascript - lập trình javascript cơ bản>>17. form trong javascript

Profile

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.