Thuộc tính defaultSelected của Option trong HTML DOM

Thuộc tính defaultSelected của đối tượng Option trong HTML DOM trả về giá trị mặc định của phần tử <option> trong tài liệu HTML. Thuộc tính này cho biết tùy chọn có được chọn mặc định khi trang tải hay không.

Cú pháp

object.defaultSelected

Ví dụ

Ví dụ minh họa thuộc tính defaultSelected:

<!DOCTYPE html>
<html>
<head>
<style>
  html { height: 100%; }
  body {
    text-align: center;
    color: #fff;
    background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
    height: 100%;
  }
  p { font-weight: 700; font-size: 1.2rem; }
  .drop-down {
    width: 35%;
    border: 2px solid #fff;
    font-weight: bold;
    padding: 8px;
  }
  .btn {
    background: #0197F6;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 35%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
  .show { font-size: 1.5rem; font-weight: bold; }
</style>
</head>
<body>
<h1>Demo thuộc tính defaultSelected của Option DOM</h1>
<p>Chào bạn, hãy chọn môn học yêu thích:</p>
<select class='drop-down'>
  <option>Vật lý</option>
  <option selected>Toán học</option>
  <option>Hóa học</option>
  <option>Tiếng Anh</option>
</select>
<button onclick="showValue()" class="btn">Hiển thị giá trị defaultSelected</button>
<div class="show"></div>
<script>
  function showValue() {
    var dropDown = document.querySelector(".drop-down");
    var msg = document.querySelector(".show").innerHTML = "Giá trị defaultSelected là " + dropDown[dropDown.selectedIndex].defaultSelected;
  }
</script>
</body>
</html>

Kết quả

Nhấn nút Hiển thị giá trị defaultSelected để kiểm tra giá trị thuộc tính defaultSelected của các tùy chọn trong danh sách thả xuống.