Add div or span to dropdown

Question

I would like to “attach” the div to the drop down list. Is it possible?

I need something like this:

To be clear, I do not need to add div to the correct dropdownlist dispatcher. I just need to attach.

What I have tried so far and not work:

---

HTML

 <select id="platypusDropDown"> <option value="duckbill">duckbill</option> <option value="duckbillPlatypus">duckbillPlatypus</option> <option value="Platypus">Platypus</option> <option value="Platypi">Platypi</option> </select> <div id="addCategory"> <input id="categoryInput" type="text" /> <br/> <input id="categoryInputAddBtn" type="button" value="Add new" /> </div> 

---

Js

 $('#platypusDropDown').click(function () { var myDiv = document.getElementById('addCategory'); this.append(myDiv); }); 

Any solution? Thanks in advance.

Answer 1

I don’t think what you are trying to achieve, perhaps using select dropdown. What I will do here is modify my HTML code and use the css style.

  <style type="text/css"> ul{ list-style: none; margin: 0; padding: 0; } </style> 

Here is my HTML code: instead of a drop-down list, I use the ul li enumeration element here.

  <div class="select-wrapper"> <a href="javascript:void(0)" id="slideDropDown">Select Dropdown</a> <ul id="platypusDropDown" style="display:none;"> <li rel="duckbill">duckbill</li> <li rel="duckbillPlatypus">duckbillPlatypus</li> <li rel="Platypus">Platypus</li> <li rel="Platypi">Platypi</li> </ul> </div> <div class="wrapper" style="display:none;"> <div id="addCategory"> <input id="categoryInput" type="text" /> <br/> <input id="categoryInputAddBtn" type="button" value="Add new" /> </div> </div> Here is my JS code: <script type="text/javascript"> $(document).ready(function(){ var flg = 0; $('.select-wrapper').click(function(){ flg++; if(flg == 1){ $this_html = jQuery('.wrapper').html(); $("#platypusDropDown").append("<li>"+$this_html+"</li>"); } $("#platypusDropDown").slideToggle(); }); }); </script> 

Answer 2

You cannot add a div to select Block. But you can add an option to the selection:

 $('#platypusDropDown').click(function () { var myDiv = document.getElementById('addCategory'); $(this).after(myDiv); }); 

Answer 3

EDIT part of jQuery. This is not possible by setting HTML WITH static markup by selecting Containing DIV. SO IT IS NOT POSSIBLE. u can use markup, but, nevertheless, it will be hidden in the browser, although you can see in Firebug, the div is attached to the drop-down list.

But if you request: add the text as a parameter to the drop-down list, then

FIDDLE Work

 $('#categoryInputAddBtn').click(function () { var myDiv = $('#categoryInput').val(); //this.append(myDiv); var option = $('<option/>'); option.attr({ 'value': 'myValue' }).text(myDiv); $('#platypusDropDown').append(option); }); 

Answer 4

As far as I know, this is not possible with standard HTML select / option tags. But there are several different libraries that emulate the functionality of a drop-down list and provide additional functions. One of them is a set of user interfaces that provides this among many other functions. You can add the so-called "Grid" components to the drop-down list, which can contain everything you want. Read more about here under the heading "Grid".

Answer 5

You can add an input value to the drop-down list.

 var $platypusDropDown = $('#platypusDropDown'); $('#categoryInputAddBtn').on('click', function() { // Value of div input var $category = $('#categoryInput').val(); // Add to dropdown list $platypusDropDown.append('<option value="' + $category + '">' + $category + '</option>'); }); 

Answer 6

If you can see it, it will help you achieve what you need,

add dropdown text box

Answer 7

Why do you want to add a div to Options? You can try the following:

 $('#platypusDropDown').click(function () { var dropHeight = $(this.options[0]).height() * this.options.length; if($(this).data('open')) { $(this).data('open', false); $('#addCategory').css('padding-top', '0px') return; } $('#addCategory').css('padding-top', dropHeight + 'px') $(this).data('open', true); }); 

JSFIDDLE DEMO