Выпадающий список с инпутом и чекбоксом

691

21 апреля 2017, 20:36

Добрый день Подскажите пожалуйста, как можно реализовать выпадающий список с инпутом. Может есть какой-нибудь плагин.

Answer 1

Вот такой пример выпадающий список с инпутом с помощью datalist:

<input type="text" name="example" list="lst"> 
<datalist id="lst"> 
  <option value="One"> 
  <option value="Two"> 
</datalist>

Пример использования CheckBox внутри списка:

var expanded = false; 
 
function showCheckboxes() { 
  var checkboxes = document.getElementById("checkboxes"); 
  if (!expanded) { 
    checkboxes.style.display = "block"; 
    expanded = true; 
  } else { 
    checkboxes.style.display = "none"; 
    expanded = false; 
  } 
}

.multiselect { 
  width: 200px; 
} 
 
.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 #dadada solid; 
} 
 
#checkboxes label { 
  display: block; 
} 
 
#checkboxes label:hover { 
  background-color: #1e90ff; 
}

<form> 
  <div class="multiselect"> 
    <div class="selectBox" onclick="showCheckboxes()"> 
      <select> 
        <option>Select an option</option> 
      </select> 
      <div class="overSelect"></div> 
    </div> 
    <div id="checkboxes"> 
      <label for="one"> 
        <input type="checkbox" id="one" />First checkbox</label> 
      <label for="two"> 
        <input type="checkbox" id="two" />Second checkbox</label> 
      <label for="three"> 
        <input type="checkbox" id="three" />Third checkbox</label> 
    </div> 
  </div> 
</form>

Ссылка на источник ответа: How to use Checkbox inside Select Option

И немного модифицированный код из примера, получился CheckBox и инпутом внутри списка:

var expanded = false; 
 
function showCheckboxes() { 
  var checkboxes = document.getElementById("checkboxes"); 
  if (!expanded) { 
    checkboxes.style.display = "block"; 
    expanded = true; 
  } else { 
    checkboxes.style.display = "none"; 
    expanded = false; 
  } 
}

.multiselect { 
  width: 300px; 
} 
 
.selectBox { 
  position: relative; 
} 
 
.selectBox select { 
  width: 300px; 
  font-weight: bold; 
} 
 
.overSelect { 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
} 
 
#checkboxes { 
  display: none; 
  border: 1px #dadada solid; 
} 
 
#checkboxes label { 
  display: block; 
} 
 
#checkboxes label:hover { 
  background-color: #1e90ff; 
}

<form> 
  <div class="multiselect"> 
    <div class="selectBox" onclick="showCheckboxes()"> 
      <select> 
        <option>Select an option</option> 
      </select> 
      <div class="overSelect"></div> 
    </div> 
    <div id="checkboxes"> 
      <label for="one"> 
        <input type="checkbox" id="one" />First<input type="text" id="oneText" /></label> 
      <label for="two"> 
        <input type="checkbox" id="two" />Second<input type="text" id="twoText" /></label> 
      <label for="three"> 
        <input type="checkbox" id="three" />Third<input type="text" id="threeText" /></label> 
    </div> 
  </div> 
</form>

Немного поработать со стилями, навести красоту и получится как у Вас на картинке. Вообще, можно посмотреть на стили в Bootstrap, там достаточно красивые выпадающие списки.