CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Shmwel
Shmwel

Reputation: 1697

Append div or span to a dropdown list

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

I require something like this:

enter image description here

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.

Upvotes: 6

Views: 7851

Answers (6)

Sandeep Pal
Sandeep Pal

Reputation: 2175

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>

Upvotes: 7

Mindaugas Večkys
Mindaugas Večkys

Reputation: 423

Why you whant add div to Options? You could try like this:

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

Upvotes: 0

Pratik Joshi
Pratik Joshi

Reputation: 11693

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

Upvotes: 1

Đặng Văn Thanh
Đặng Văn Thanh

Reputation: 558

You can add input value to dropdown 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>');
});

Upvotes: 0

Daniel
Daniel

Reputation: 3514

As far as I know this is not possible with standard HTML select/option tags. But there are several different libraries emulating dropdown functionality and giving additional functionalities. One of those is UI Kit which provides this among a lot of other features. You can add so called 'Grid' components to the dropdown which can in fact contain anything you want. See detail over here under the headline 'Grid'.

Upvotes: 0

SlyBeaver
SlyBeaver

Reputation: 1312

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

Upvotes: 1

Related Questions