Want to make checkboxes in the dropdown list?-CodePudding

Currently, I have a dropdown list and 1-25 values in the dropdown.

The current one is I want to make a checkbox for those values instead of choosing multiple.

Is there any way to add a checkbox for those?

var mtf = document.getElementById('affectedwaferid').selectedOptions;
      var affectedwf = Array.from(mtf).map(({ value }) => value);
      //alert(affectedwf);
      document.getElementById("selected-result").innerHTML = affectedwf;

<div id="afwid">
      <label  for="affectedwaferid" style="margin-left: 1px;">Affected Wafer ID : <span id="selected-result"></span></label>
           <div >
            <p  style="margin-top: -6px;">
                
                <select  id="affectedwaferid" name="affectedwaferid" multiple>
                <option value="" selected > Select Quantity</option>
                <?php  
                //echo $cbo_oorigsite;
                ?>
                <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>
                  <option value="13">13</option>
                  <option value="14">14</option>
                  <option value="15">15</option>
                  <option value="16">16</option>
                  <option value="17">17</option>
                  <option value="18">18</option>
                  <option value="19">19</option>
                  <option value="20">20</option>
                  <option value="21">21</option>
                  <option value="22">22</option>
                  <option value="23">23</option>
                  <option value="24">24</option>
                  <option value="25">25</option>

              </select>
            </p>
          </div>

CodePudding user response：

What you want is a MultiSelect. You can implement it on your own as shown here, or you can import a library: https://www.cssscript.com/multi-select-dropdown-picker/

CodePudding user response：

Firstly, your question is not very clear.
Anyway, I think you want something like below to select the quatity.

Try below and amend as you required:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  <style>
    h1 {
      color: green;
    }

    .multipleSelection {
      width: 300px;
      background-color: #bcc2c1;
    }

    .selectBox {
      position: relative;
    }

    .selectBox select {
      width: 100%;
      font-weight: bold;
    }

    .overSelect {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }

    #checkBoxes {
      display: none;
      border: 1px #8df5e4 solid;
    }

    #checkBoxes label {
      display: block;
    }

    #checkBoxes label:hover {
      background-color: #4f615e;
    }
  </style>
  <body>
    <form>
      <div >
        <div  onclick="showCheckboxes()">
          <select>
            <option>Select Quantity</option>
          </select>
          <div ></div>
        </div>

        <div id="checkBoxes">
          <label for="first">
            <input type="checkbox" id="first"  />
            1
          </label>

          <label for="second">
            <input type="checkbox" id="second"  />
            2
          </label>
          <label for="third">
            <input type="checkbox" id="third"  />
            3
          </label>
          <label for="fourth">
            <input type="checkbox" id="fourth"  />
            4
          </label>
        </div>
      </div>
    </form>
    <script>
      let show = true

      $('.chb').change(function () {
        $('.chb').prop('checked', false)
        $(this).prop('checked', true)
      })

      function showCheckboxes() {
        if (show) {
          $('#checkBoxes').hide()
          show = false
        } else {
          $('#checkBoxes').show()
          show = true
        }
      }
    </script>
  </body>
</html>