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

HTML + Add input field inside a dropdown box

提问by Rubyist

A new idea came across my mind.Someone may have implemented this. I am trying to get a way to add a textbox inside a dropdown list.

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

Means I want to add a input box inside a dropdown list. For example :

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

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

Does anyone have any idea on how to execute this? I do not want to use any modal box or input box outside this dropdown. I just want to add the value inside the dropdown and press the enter key to add in DB. I'm not worried about the server-side code. I want to be able to render the dropdown only.

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

Thanks in advance.

提前致谢。

采纳答案by PSL

No. You cannot do that. Optioncannot contain any other elements other than text content.

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

You may instead want to look at some custom plugins, or create your own to render div/spans out of the select that you provide.

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

Permitted content Text with eventually escaped characters (like é).

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

Just one example using bootstrap's dropdown. You can customize and style it accordinf to your need.

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

Fiddle

小提琴

Little bit of customization like this

像这样的一点点定制

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

回答by Rohan Kumar

You can't add input elementin a drop down element, for this you can create a custom drop down like, by using ul liin which you can add a text fieldin it. Or you can add an other optionon selecting other you can show a text boxnear by the drop down option

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

like

喜欢

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

回答by Rachit Doshi

The only possible way out is to use an autocomplete which has ul and li's or you can have an external input box and an add to list button which would add the text to the list

唯一可能的出路是使用具有 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" />

In Jquery,

在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>');
});

回答by farcyde21

I haven't tried implementing this yet so I don't know that it's 100% correct but you could position a hidden (read display:'none';) input box on top of the select.

我还没有尝试实现这个，所以我不知道它是 100% 正确的，但你可以在选择的顶部放置一个隐藏的（读取显示：'无';）输入框。

HTML

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

CSS

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

Use jQuery to show the input box on selecting a particular value from the dropdown (and hide for all other values).

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

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

Then write a function to add the result to the dropdown if you wish.

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