HTML + Add drop-down box

Question

A new thought came across my thoughts. Perhaps someone realized this. I am trying to get a way to add a text box inside a dropdown.

So I want to add an input field to the drop-down list. For instance:

<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 know how to accomplish this? I do not want to use any modal field or input field outside this drop-down list. I just want to add a value in the drop-down list and press enter to add to the database. I am not worried about server code. I want to be able to display a drop down list.

Thanks in advance.

Answer 1

No. You cannot do this. Option cannot contain any other elements than text.

Instead, you can look at some custom plugins or create your own to display div / spans from your selected sentence.

Valid content Text with all escaped characters (e.g. & eacute;).

Just one example using the bootstrap dropdown. You can customize and customize it according to your needs.

Fiddle

A small tweak like this

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

Answer 2

You cannot add an input element to the drop down element , for this you can create your own drop-down list, for example, using ul li , into which you can add a text field . Or you can add another other option when choosing another, you can show the text box next to drop down option

as

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

Answer 3

The only possible way out is to use autocomplete, which has ul and li, or you can have an external input field and an add to list button that will add 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

I have not tried to implement this yet, so I don’t know that he is 100% right, but you can put a hidden (read display: 'none';) input field on top of the selected one.

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 display an input field when you select a specific value from the drop-down list (and hide 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 drop-down list if you want.