HTML + Add input field inside a dropdown box

Question

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 i

Answer 1

You can't add input element in a drop down element, for this you can create a custom drop down like, by using ul li in which you can add a text field in it. Or you can add an other option on selecting other you can show a text box near by the drop down option

like

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

Answer 2

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.

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

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

$(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.

Answer 3

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

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

$('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

No. You cannot do that. Option cannot 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.

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.

Fiddle

Little bit of customization like this

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