Подтвердить что ты не робот

Выпадающее меню/текстовое поле в одном

Я работаю над созданием нового сайта, и мне нужно выпадающее меню, чтобы выбрать количество чего-то на моем сайте. Но в то же время мне нужен этот выпадающий список, чтобы принять текст. Поэтому, если клиент хочет выбрать из выпадающего списка, он может, также если клиент хочет ввести сумму по тексту, он также может. Как вы можете видеть, я хочу сделать его двойственным.

Например: предположим, что существует раскрывающееся меню amount, а его элементы - (1,2,3);

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

После описания моей проблемы и простого примера, который я вам представил, вот мой вопрос:

Есть ли код HTML для создания выпадающего меню и текстового поля в одном, как двойного, не разделенного?

4b9b3361

ОТВЕТЫ

Ответ 1

Вариант 1

Включите script из dhtmlgoodies и выполните инициализацию следующим образом:

<input type="text" name="myText" value="Norway"
       selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico"> 

createEditableSelect(document.forms[0].myText);

Вариант 2

Здесь пользовательское решение, которое объединяет элемент <select> и <input>, стиляет их и переключает туда и обратно через JavaScript

<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
  <select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;"
          onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
    <option></option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
  </select>
  <input type="text" name="displayValue" id="displayValue" 
         placeholder="add/select a value" onfocus="this.select()"
         style="position:absolute;top:0px;left:0px;width:183px;width:180px\9;#width:180px;height:23px; height:21px\9;#height:18px;border:1px solid #556;"  >
  <input name="idValue" id="idValue" type="hidden">
</div>

Ответ 2

Вы можете сделать это изначально с помощью HTML5 <datalist>:

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

Ответ 3

Я нашел этот вопрос и обсуждение очень полезным и хотел показать решение, в котором я оказался. Он основан на ответе @DevangRathod, но я использовал jQuery и сделал пару настроек, поэтому хотел показать полностью прокомментированный образец, чтобы помочь кому-либо еще работать над чем-то похожим. Я изначально использовал элемент списка данных HTML5, но был недоволен этим решением, так как он удаляет параметры из выпадающего списка, которые не соответствуют тексту, введенному в поле. В моем приложении я хотел, чтобы полный список всегда был доступен.

Полнофункциональная демонстрация здесь: https://jsfiddle.net/abru77mm/

HTML:

<!-- 
Most style elements I left to the CSS file, but some are here.
Reason being that I am actually calculating my width dynamically
in my application so when I dynamically formulate this HTML, I
want the width and all the factors (such as padding and border
width and margin) that go into determining the proper widths to
be controlled by one piece of code, so those pieces are done in
the in-line style.  Otherwise I leave the styling to the CSS file.
-->
<div class="data-list-input" style="width:190px;">
  <select class="data-list-input" style="width:190px;">
    <option value="">&lt;Free Form Text&gt;</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    <!-- Note that though the select/option allows for a different
    display and internal value, there is no such distinction in the
    text box, so for all the options (except the "none" option) the
    value and content of the option should be identical. -->
  </select>
  <input class="data-list-input" style="width:160px;padding:4px 6px;border-width:1px;margin:0;" type="text" name="sex" required="required" value="">
</div>

JS:

jQuery(function() {
  //keep the focus on the input box so that the highlighting
  //I'm using doesn't give away the hidden select box to the user
  $('select.data-list-input').focus(function() {
    $(this).siblings('input.data-list-input').focus();
  });
  //when selecting from the select box, put the value in the input box
  $('select.data-list-input').change(function() {
    $(this).siblings('input.data-list-input').val($(this).val());
  });
  //When editing the input box, reset the select box setting to "free
  //form input". This is important to do so that you can reselect the
  //option you had selected if you want to.
  $('input.data-list-input').change(function() {
    $(this).siblings('select.data-list-input').val('');
  });
});

CSS

div.data-list-input
{
    position: relative;
    height: 20px;
    display: inline-flex;
    padding: 5px 0 5px 0;
}
select.data-list-input
{
    position: absolute;
    top: 5px;
    left: 0px;
    height: 20px;
}
input.data-list-input
{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
}

Любые комментарии для улучшения моей реализации приветствуются. Надеюсь, кто-то найдет это полезным.

Ответ 4

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

Ответ 6

Вместо выпадающего меню вы можете использовать AJAX AutoComplete TextBox.