HTML DOM सेलेक्ट multiple प्रॉपर्टी

परिचय

HTML DOM select multiple प्रॉपर्टी प्राप्त करती है और संशोधित करती है कि ड्रॉप-डाउन लिस्ट से एकाधिक ऑप्शन चुने जा सकते हैं या नहीं।

सिंटैक्स

मान प्राप्त करना

object.multiple

मान सेट करना

object.multiple = true | false

उदाहरण

ड्रॉप-डाउन लिस्ट में एकाधिक चयन सक्षम करना:

<!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 सेलेक्ट multiple प्रॉपर्टी डेमो</h1>
<p>हाय, अपना पसंदीदा विषय चुनें:</p>
<select class='drop-down'>
  <option>Physics</option>
  <option>Maths</option>
  <option>Chemistry</option>
  <option>English</option>
</select>
<button onclick="multiple()" class="btn">एकाधिक चुनें सक्षम करें</button>
<div class="show"></div>
<script>
  function multiple() {
    var dropDown = document.querySelector(".drop-down");
    var showMsg = document.querySelector(".show");
    dropDown.multiple = true;
    showMsg.innerHTML = "अब आप Ctrl/Shift का उपयोग करके एकाधिक ऑप्शन चुन सकते हैं";
  }
</script>
</body>
</html>

आउटपुट

"एकाधिक चुनें सक्षम करें" बटन पर क्लिक करने पर ड्रॉप-डाउन लिस्ट में Ctrl/Shift दबाकर एकाधिक ऑप्शन चुने जा सकेंगे।