Append div or span to a dropdown list

Question

I would like to "attach" a div to a dropdown list. Is that possible?

I require something like this:

To be clear, I don't need to add div into the proper dropdownlist controller. I just need to attach.

What I've tried so far and not working:

---

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 so, what you are trying to achieve is possible using select dropdown.What here, i will do is modify my HTML Code and use css style.

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

Here is my HTML Code: Instead of dropdown, i am using here ul li listing element.

 <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 can't add DIV to selectBlock. But you can add option into select:

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

Answer 3

LEAVE jQuery Part . This is not possible by setting HTML static markup WITH select Containing DIV . SO IT IS NOT POSSIBLE . u may use markup but , still It wil hide in browser even though u can see in Firebug , div is attached to dropdown.

But if u r asking for : add Text as option in dropdown , then ,

Working FIDDLE

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