7

一个新的想法浮现在我的脑海。有人可能已经实现了这个。我正在尝试一种在下拉列表中添加文本框的方法。

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

<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>

有谁知道如何执行这个？我不想在此下拉列表之外使用任何模式框或输入框。我只想在下拉列表中添加值并按回车键添加到数据库中。我不担心服务器端代码。我希望能够只呈现下拉菜单。

提前致谢。

4

5 回答 5

7

不，你不能那样做。选项不能包含除文本内容以外的任何其他元素。

您可能想要查看一些自定义插件，或者创建自己的插件以在您提供的选择中呈现 div/spans。

允许的内容 带有最终转义字符（如 é）的文本。

只是一个使用bootstrap的下拉菜单的例子。您可以根据需要自定义和设置样式。

小提琴

像这样的一点点定制

$('.dropdown-menu li').click(function () {
     $('.dropdown-toggle b').remove().appendTo($('.dropdown-toggle').text($(this).text()));
 });
于 2013-06-21T05:04:51.340 回答
1

您不能添加input elementa drop down element，为此您可以创建一个自定义下拉菜单，例如，ul li您可以在其中添加 a text field。或者您可以other option在选择其他选项时添加一个您可以在text box附近显示drop down option

喜欢

$('select').on('change',function(){
    if($(this).val()=='other')
    {
        $('#otherTextBox').show();
    }
    else
    {
        $('#otherTextBox').val('').hide();
    }
});
于 2013-06-21T05:05:36.790 回答
1

唯一可能的出路是使用具有 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>');
});
于 2013-06-21T07:42:37.763 回答
1

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

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

更多信息在这里

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

于 2021-03-30T15:13:02.217 回答
0

我还没有尝试过实现这个，所以我不知道它是 100% 正确的，但是你可以在选择的顶部放置一个隐藏的（读取显示：'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');
      }
   });
});

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

于 2016-10-06T20:29:36.270 回答