mardi 11 mai 2021

Checkbox is not getting displayed in dropdown

I have to do the multi select from the dropdown. So I have referred this link. But when I try to open this program in the browser I dont see tthe checkbox and I cant select more data also. My script looks like this

<html>
        <head>
                <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Stylesheets-->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
    <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">

    <!--JS-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        </head>

<body>
        <select multiple>
                <option value="a">a</option>
                <option value="b">b</option>
                <option value="c">c</option>
              </select>
        <form class="needs-validation" novalidate>
        <select
          class="select" multiple
          id="basic-select"
          data-mdb-validation="true"
          data-mdb-valid-feedback="This value is valid"
          data-mdb-invalid-feedback="This value is invalid"
          data-mdb-clear-button="true">
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
          <option value="5">Five</option>
          <option value="6">Six</option>
          <option value="7">Seven</option>
          <option value="8">Eight</option>
        </select>
        <button type="submit" id="submit" class="btn btn-primary btn-sm mt-3">
          Submit
        </button>
      </form>
<script>
        (() => {
  'use strict';

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  const forms = document.querySelectorAll('.needs-validation');

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms).forEach((form) => {
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      event.stopPropagation();

      form.classList.add('was-validated');
    },false);
  });
})();
</script>
</body>
</html>

My chrome version is 90.0. Here I tried with two examples. I can see two dropdowns are showing without checkbox.Can someone help me how should i show the checkbox and do the multiple selection




Aucun commentaire:

Enregistrer un commentaire