• Címkék:
  • select
  • form
  • űrlap
  • lista
  • autocomplete
  • lebomló
  • HTML5

Chosen

Példa 1: Legördülő lista

Deklaráció

        $(document).ready(function(){
          $('#pelda-1').chosen({ no_results_text: "Nincs ilyen elem" });
        });
      

HTML kód

        <select id="pelda-1" data-placeholder="Válassz egy országot!" >
          <option value=""></option>
          <option value="United States">United States</option>
          <option value="United Kingdom">United Kingdom</option>
          <option value="Afghanistan">Afghanistan</option>
          ...
        </select>
      

Példa 2: Legördülő lista (multiple)

Deklaráció

        $(document).ready(function(){
          $('#pelda-2').chosen({ max_selected_options: 3 });
        });
      

HTML kód

        <select id="pelda-2" data-placeholder="Válassz országot!" multiple >
          <option value=""></option>
          <option value="United States">United States</option>
          <option value="United Kingdom">United Kingdom</option>
          <option value="Afghanistan">Afghanistan</option>
          ...
        </select>
      

Példa 3: Legördülő lista csoportokkal

Deklaráció

        $(document).ready(function(){
          $('#pelda-3').chosen();
        });
      

HTML kód

        <select id="pelda-3" data-placeholder="Válassz egy várost!" >
          <option value=""></option>
          <optgroup label="Bács-Kiskun megye">
            <option>Kalocsa</option>
            <option>Kecskemét</option>
            <option>Kiskőrös</option>
            <option>Kiskunfélegyháza</option>
          </optgroup>
          <optgroup label="Baranya megye">
            <option>Komló</option>
            <option>Pécs</option>
            <option>Siklós</option>
            <option>Szigetvár</option>
          </optgroup>
          ...
        </select>
      

Példa 4: Legördülő lista csoportokkal (multiple)

Deklaráció

        $(document).ready(function(){
          $('#pelda-4').chosen();
        });
      

HTML kód

        <select id="pelda-4" data-placeholder="Válassz várost!" multiple >
          <option value=""></option>
          <optgroup label="Bács-Kiskun megye">
            <option>Kalocsa</option>
            <option>Kecskemét</option>
            <option>Kiskőrös</option>
            <option>Kiskunfélegyháza</option>
          </optgroup>
          ...
        </select>
      

Példa 5: Elemek engedélyezése/tiltása, kezdő érték

Deklaráció

        $(document).ready(function(){
          $('#pelda-5').chosen({ allow_single_deselect: true });
        });
      

HTML kód

A kezdőérték meghatározásához a selected attribútum (5. sor), míg a letiltott (elrejtett) elemek beállításához a disabled attribútum (6. és 8. sor) használható:

        <select id="pelda-5" data-placeholder="Válassz!" >
          <option value=""></option>
          <option>Első</option>
          <option>Második</option>
          <option selected>Harmadik</option>
          <option disabled>Negyedik</option>
          <option>Ötödik</option>
          <option disabled>Hatodik</option>
          <option>Hetedik</option>
        </select>
      

Példa 6: Elemek engedélyezése/tiltása (multiple lista)

Deklaráció

        $(document).ready(function(){
          $('#pelda-6').chosen();
        });
      

HTML kód

        <select id="pelda-6" data-placeholder="Válassz!" multiple >
          <option value=""></option>
          <option>Első</option>
          <option>Második</option>
          <option selected>Harmadik</option>
          <option disabled>Negyedik</option>
          <option>Ötödik</option>
          <option disabled>Hatodik</option>
          <option>Hetedik</option>
        </select>
      

« bezár