Question

我想到了一个新的想法。有人可能已经实现了这一点。我试图找到一种方法在下拉列表中添加一个文本框。

表示我想在下拉列表中添加一个输入框。例如：

<select id='country'>
  <option value='USA'>USA</option>
  <option value='UK'>UK</option>
  <option value='Russia'>Russia</option>
  <option><input type='text' /></option> // Here I want to add dynamic country 
                                            using ajax but I am able to render
                                            this dropdown.
</select>

有没有人知道如何执行此操作？我不想在此下拉列表外使用任何模态框或输入框。我只想在下拉列表中添加值，然后按回车键添加数据库。我并不担心服务器端代码。我希望能够只渲染下拉列表。

提前致谢。

Answer 1

没有。你不能这样做。 Option不能包含除文字内容之外的任何其他元素。

您可能希望查看一些自定义插件，或者创建自己的插件，以便从您提供的选择中渲染div / span。

允许的内容包含最终转义字符的文字（如é）。

使用 bootstrap 的下拉列表中的一个示例。您可以根据需要自定义和设计样式。

Fiddle

一点点自定义，例如 this

$('.dropdown-menu li').click(function () {
     $('.dropdown-toggle b').remove().appendTo($('.dropdown-toggle').text($(this).text()));
 });

Answer 2

您无法在input element中添加drop down element，为此您可以使用ul li创建自定义下拉列表，您可以在其中添加text field在里面。或者您可以在选择其他人时添加other option，text box附近可以显示drop down option

像

$('select').on('change',function(){
    if($(this).val()=='other')
    {
        $('#otherTextBox').show();
    }
    else
    {
        $('#otherTextBox').val('').hide();
    }
});

Answer 3

唯一可行的方法是使用具有ul和li的自动完成功能，或者您可以使用外部输入框和添加到列表按钮，将文本添加到列表中

<select id='country'>
    <option value='USA'>USA</option>
    <option value='UK'>UK</option>
    <option value='Russia'>Russia</option>
    <option><input type='text' /></option>
</select>
<input type="text" value="" id="addOptionValue" /> 
<input type="text" value="" id="addOption" />
<input type ="button" value="addOption" id="insertOption" />

在Jquery，

$('input#insertOption').click(function(){
    var currentHtml = $.trim($('input#addOption').val());
    var currentVal = $.trim($('input#addOptionValue').val());
    if (currentVal  === '' || currentHtml  === ''))) {
        alert('Please enter value');
        return false;
    }
    $('select#country').append('<option value="'+currentVal+'">'+currentHtml+'</option>');
});

Answer 4

如果我理解正确的话，元素将非常适合这里。您不需要任何 jQuery 或 javascript：

<input list="country-list" id="country"/>
<datalist id="country-list">
    <option value="USA">
    <option value="UK">
    <option value="Russia">
</datalist>

更多信息here

我迟到了 8 年，但我认为这可能会帮助那些即使在今天也正在寻找类似事物的人:)

Answer 5

我还没有尝试过这样做，所以我不知道它是100％正确但你可以在select的顶部放置一个隐藏的（读取显示：'none';）输入框。

<强> HTML

<select id="country">
   <option value="INP">Input Value</option>
   <option value="USA">USA</option>
   <option value="MEX">Mexico</option>
   <option value="CAN">Canada</option>
</select><br/>
<input type="text" id="countryInput"/>

<强> CSS

#countryInput{ display:'none';position:relative;top:-15px;}

使用jQuery显示从下拉列表中选择特定值的输入框（并隐藏所有其他值）。

$(function(){
   $('#country').on('change',function(){
      if(this.val()==="INP"){
         $('#countryInput').prop('display','');
      } else {
         $('#countryInput').prop('display','none');
      }
   });
});

然后编写一个函数，将结果添加到下拉列表中。

HTML +在下拉框中添加输入字段

5 个答案:

Fiddle