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

HTML DOM Chọn nhiều thuộc tính


HTML DOM chọn nhiều thuộc tính trả về và sửa đổi xem có thể chọn nhiều tùy chọn từ danh sách thả xuống hay không.

Cú pháp

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

  • Trả lại nhiều

object.multiple
  • Sửa đổi nhiều

object.multiple = true | false

Ví dụ

Hãy để chúng tôi xem một ví dụ về HTML DOM select nhiều thuộc tính -

<!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:50%;
      border:2px solid #fff;
      font-weight:bold;
      padding:8px;
      background-color:#ffffff24;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:45%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .show{
      font-size:1.1rem;
      font-weight:bold;
   }
</style>
</head>
<body>
<h1<DOM Select multiple Property Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down'>
<option>Physics</option>
<option>Maths</option>
<option>Chemistry</option>
<option>English</option>
</select>
<button onclick="multiple()" class="btn"<Click to select multiple>/button>
<div class="show"></div>
<script>
   function multiple() {
      var dropDown = document.querySelector(".drop-down");
      var showMsg = document.querySelector(".show");
      dropDown.multiple=true;
      showMsg.innerHTML ="Now you can select multiple options using ctrl/shift" ;
   }
</script>
</body>
</html>

Đầu ra

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

HTML DOM Chọn nhiều thuộc tính

Nhấp vào “ Nhấp để chọn nhiều ”Để chọn nhiều tùy chọn trong danh sách thả xuống.

HTML DOM Chọn nhiều thuộc tính