ड्रॉप या ड्रॉप को ड्रॉपडाउन सूची में जोड़ें

Question

मैं div को ड्रॉपडाउन सूची में "संलग्न" करना चाहता हूं। क्या यह संभव है?

मैं कुछ इस तरह की आवश्यकता होती है:

स्पष्ट है कि, मैं उचित dropdownlist नियंत्रक में div जोड़ने की जरूरत नहीं है। मुझे बस संलग्न करने की जरूरत है।

क्या मैं अब तक और काम नहीं कर की कोशिश की है:

---

एचटीएमएल:

<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> 

---

जे एस:

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

कोई समाधान? अग्रिम में धन्यवाद।

Answer 1

मैं ऐसा नहीं सोचता, आप क्या हासिल करने की कोशिश कर रहे हैं यहाँ का चयन dropdown.What का उपयोग कर सकता है, मैं क्या करेंगे है मेरी एचटीएमएल कोड और उपयोग को संशोधित सीएसएस शैली।

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

यहां मेरा HTML कोड है: ड्रॉपडाउन के बजाय, मैं यहां उल ली लिस्टिंग तत्व का उपयोग कर रहा हूं।

<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

आप चयनब्लॉक में DIV नहीं जोड़ सकते हैं। लेकिन आप चयन में विकल्प जोड़ सकते हैं:

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

Answer 3

jQuery भाग छोड़ दें। डीवी युक्त चयन के साथ एचटीएमएल स्थिर मार्कअप सेट करके यह संभव नहीं है। तो यह संभव नहीं है। आप मार्कअप का उपयोग कर सकते हैं, लेकिन फिर भी यह ब्राउज़र में छिप जाएगा, भले ही आप फायरबग में देख सकें, div ड्रॉपडाउन से जुड़ा हुआ है।

लेकिन यू के लिए पूछ r यदि: ड्रॉपडाउन में विकल्प के रूप में पाठ जोड़ें, फिर,

कार्य FIDDLE

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

Answer 4

जहां तक ​​मैं जानता हूँ कि इस चयन/विकल्प टैग मानक HTML के साथ संभव नहीं है। लेकिन कई अलग-अलग पुस्तकालय हैं जो ड्रॉपडाउन कार्यक्षमता को अनुकरण करते हैं और अतिरिक्त कार्यक्षमताओं को देते हैं। उनमें से एक UI Kit है जो इसे कई अन्य सुविधाओं के बीच प्रदान करता है। आप ड्रॉपडाउन में तथाकथित 'ग्रिड' घटक जोड़ सकते हैं जो वास्तव में आप चाहते हैं कि कुछ भी हो सकता है। शीर्षक 'ग्रिड' के तहत here पर विस्तार से देखें।

Answer 5

आप ड्रॉपडाउन सूची में इनपुट मूल्य जोड़ सकते हैं।

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

आप देख सकते हैं अगर यह यह आप को प्राप्त करने के आपको क्या चाहिए एक बहुत मदद मिलेगी,

add text box with dropdown

Answer 7

क्यों आप विकल्प div जोड़ने whant? आप इस तरह की कोशिश कर सकते:

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