CODEWITHSUNDEEP
jqueryhtml
RahulOnRails
RahulOnRails

Reputation: 6542

HTML + Add input field inside a dropdown box

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.

Upvotes: 7

Views: 37040

Answers (5)

Maxime
Maxime

Reputation: 11

If I understand correctly, a <datalist> element would fit perfectly here. You don't need any jQuery or javascript:

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

More infos here

I'm 8 years late, but I think this might help those who are looking for a similar thing even today :)

Upvotes: 1

farcyde21
farcyde21

Reputation: 1

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.

Upvotes: 0

Rachit Doshi
Rachit Doshi

Reputation: 183

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

Upvotes: 1

PSL
PSL

Reputation: 123739

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

Upvotes: 7

Rohan Kumar
Rohan Kumar

Reputation: 40639

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

Upvotes: 1

Related Questions