Computer >> Máy Tính >  >> Lập trình >> HTML

HTML DOM Option mặc định

Thuộc tính HTML DOM option defaultSelected trả về giá trị mặc định của phần tử tùy chọn trong tài liệu HTML.

Cú pháp

Sau đây là cú pháp -

object.defualtSelected

Ví dụ

Hãy để chúng tôi xem một ví dụ về 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>DOM Option defaultSelected Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down'>
<option>Physics</option>
<option selected>Maths</option>
<option>Chemistry</option>
<option>English</option>
</select>
<button onclick="showValue()" class="btn">Show defaultSelected Value</button>
<div class="show"></div>
<script>
   function showValue() {
      var dropDown = document.querySelector(".drop-down");
      var msg = document.querySelector(".show").innerHTML="Value of defaultSelected is " +
dropDown[dropDown.selectedIndex].defaultSelected;
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML DOM Option mặc định

Nhấp vào “ xanh lam ”Để kiểm tra giá trị của thuộc tính defaultSelected cho tất cả các tùy chọn có trong danh sách thả xuống.

HTML DOM Option mặc định


HTML DOM Option mặc định