qianda
/
hebei-chengben-car


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
							<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap@5.0.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/dselect.css">
  <title>dselect - Dropdown select box for bootstrap 5</title>
</head>

<body class="bg-light">

  <div class="container my-5" style="max-width: calc(360px + 1rem)">
    <div class="card card-body border-0 shadow-sm">
      <div class="d-flex align-items-center gap-1">
        <svg width="36" height="36" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#0d6efd">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <h1>dselect</h1>
      </div>
      <p class="text-secondary">Dropdown select box for bootstrap 5</p>
      <p>
        <a href="https://github.com/jarstone/dselect" target="_blank" class="link-secondary text-decoration-none d-flex align-items-center gap-1">
          <svg viewBox="0 0 24 24" width="21" height="21" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
          Github
        </a>
      </p>
      <div style="max-width: 360px" class="my-4 d-flex flex-column gap-5">

        <div>
          <h6>Basic</h6>
          <select class="form-select" id="example-basic">
            <option value="chrome">Chrome</option>
            <option value="firefox">Firefox</option>
            <option value="safari">Safari</option>
            <option value="edge">Edge</option>
            <option value="opera">Opera</option>
            <option value="brave">Brave</option>
          </select>
        </div>

        <div>
          <h6>With placeholder</h6>
          <select class="form-select" id="example-placeholder">
            <option value="">Choose browser</option>
            <option value="chrome">Chrome</option>
            <option value="firefox">Firefox</option>
            <option value="safari">Safari</option>
            <option value="edge">Edge</option>
            <option value="opera">Opera</option>
            <option value="brave">Brave</option>
          </select>
        </div>

        <div>
          <h6>Multiple</h6>
          <select class="form-select" id="example-multiple" multiple>
            <option value="">Choose browser</option>
            <option value="chrome" selected>Chrome</option>
            <option value="firefox" selected>Firefox</option>
            <option value="safari" selected>Safari</option>
            <option value="edge">Edge</option>
            <option value="opera">Opera</option>
            <option value="brave">Brave</option>
          </select>
        </div>

        <div>
          <h6>Search</h6>
          <select class="form-select" id="example-search">
            <option value="">Choose browser</option>
            <option value="chrome">Chrome</option>
            <option value="firefox">Firefox</option>
            <option value="safari">Safari</option>
            <option value="edge">Edge</option>
            <option value="opera">Opera</option>
            <option value="brave">Brave</option>
          </select>
        </div>

        <div>
          <h6>Creatable</h6>
          <select class="form-select" id="example-creatable">
            <option value="">Choose or add browser</option>
            <option value="chrome">Chrome</option>
            <option value="firefox">Firefox</option>
            <option value="safari">Safari</option>
          </select>
        </div>

        <div>
          <h6>Clearable</h6>
          <select class="form-select" id="example-clearable">
            <option value="">Choose browser</option>
            <option value="chrome" selected>Chrome</option>
            <option value="firefox">Firefox</option>
            <option value="safari">Safari</option>
            <option value="edge">Edge</option>
            <option value="opera">Opera</option>
            <option value="brave">Brave</option>
          </select>
        </div>

        <div class="d-flex flex-column gap-1">
          <h6>Sizing</h6>
          <select class="form-select" id="example-sizing-sm">
            <option value="">Choose browser</option>
            <option value="chrome">Chrome</option>
            <option value="firefox">Firefox</option>
            <option value="safari">Safari</option>
            <option value="edge">Edge</option>
            <option value="opera">Opera</option>
            <option value="brave">Brave</option>
          </select>
          <select class="form-select" id="example-sizing-default">
            <option value="">Choose browser</option>
            <option value="chrome">Chrome</option>
            <option value="firefox">Firefox</option>
            <option value="safari">Safari</option>
            <option value="edge">Edge</option>
            <option value="opera">Opera</option>
            <option value="brave">Brave</option>
          </select>
          <select class="form-select" id="example-sizing-lg">
            <option value="">Choose browser</option>
            <option value="chrome">Chrome</option>
            <option value="firefox">Firefox</option>
            <option value="safari">Safari</option>
            <option value="edge">Edge</option>
            <option value="opera">Opera</option>
            <option value="brave">Brave</option>
          </select>
        </div>

        <div>
          <h6>Validation</h6>
          <form class="needs-validation d-flex flex-column gap-3" novalidate>
            <div>
              <select class="form-select dselect" data-dselect-clearable="true" required>
                <option value="">Choose browser</option>
                <option value="chrome">Chrome</option>
                <option value="firefox">Firefox</option>
                <option value="safari">Safari</option>
                <option value="edge">Edge</option>
                <option value="opera">Opera</option>
                <option value="brave">Brave</option>
              </select>
              <div class="invalid-feedback">This field is required.</div>
              <div class="valid-feedback">Good choice.</div>
            </div>
            <div>
              <select class="form-select dselect" multiple required>
                <option value="">Choose browser</option>
                <option value="chrome">Chrome</option>
                <option value="firefox">Firefox</option>
                <option value="safari">Safari</option>
                <option value="edge">Edge</option>
                <option value="opera">Opera</option>
                <option value="brave">Brave</option>
              </select>
              <div class="invalid-feedback">This field is required.</div>
              <div class="valid-feedback">Good choice.</div>
            </div>
            <button class="btn btn-primary" type="submit">Submit</button>
          </form>
        </div>

      </div>
    </div>
  </div>

  <script src="https://unpkg.com/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
  <script src="js/dselect.js"></script>
  <script>
    // basic
    dselect(document.querySelector('#example-basic'))

    // placeholder
    dselect(document.querySelector('#example-placeholder'))

    // multiple
    dselect(document.querySelector('#example-multiple'))

    // search
    dselect(document.querySelector('#example-search'), {
      search: true
    })

    // creatable
    dselect(document.querySelector('#example-creatable'), {
      search: true,
      creatable: true
    })

    // clearable
    dselect(document.querySelector('#example-clearable'), {
      clearable: true
    })

    // Sizing
    dselect(document.querySelector('#example-sizing-sm'), {
      size: 'sm'
    })
    dselect(document.querySelector('#example-sizing-default'))
    dselect(document.querySelector('#example-sizing-lg'), {
      size: 'lg'
    })

    // Validation
    // Enable dselect on all '.dselect'
    for (const el of document.querySelectorAll('.dselect')) {
      dselect(el)
    }
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    void (function() {
      document.querySelectorAll('.needs-validation').forEach(form => {
        form.addEventListener('submit', event => {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }

          form.classList.add('was-validated')
        })
      })
    })()

  </script>
</body>

</html>