Question

我想将div“附加”到下拉列表中。这可能吗？

我需要这样的东西：

enter image description here

要清楚，我不需要将div添加到正确的下拉列表控制器中。我只需要附上。

到目前为止我尝试了什么并且没有工作：

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

任何解决方案？提前谢谢。

Answer 1

我不这么认为，你想要实现的是使用选择下拉列表。我在这里做的是修改我的HTML代码并使用css样式。

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

这是我的HTML代码：我在这里使用的是ul li list 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

您无法将DIV添加到selectBlock。但您可以在选择中添加选项：

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

Answer 3

离开jQuery Part。通过选择Containing DIV设置HTML静态标记是不可能的。所以这是不可能的。你可以使用标记，但是，即使你可以在Firebug中看到，它仍会隐藏在浏览器中，div附加到下拉列表。

但是如果你要求：在下拉列表中添加Text作为选项，那么，

工作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 select / option标签是不可能的。但是有几个不同的库模拟下拉功能并提供其他功能。其中一个是UI Kit，它提供了许多其他功能。你可以添加所谓的网格＆＃39;下拉列表中的组件实际上可以包含您想要的任何内容。在标题＆＃39;网格＆＃39;

下查看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？你可以尝试这样：

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

将div或span附加到下拉列表

7 个答案: