将div或span附加到下拉列表中

Question

我想要将一个 div 附加到下拉列表中，这是否可行？

我需要类似于这样的效果：

明确一点，我不需要将 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); 
});

有什么解决方法吗？提前感谢。

- Shmwel

---

必须要有一些 CSS 规则来清晰地附加和显示/隐藏播放内容。 - Sudhanshu Saxena

将你的 js 代码行 this.append(myDiv) 改为 $(myDiv).after($(this))。或者你可以尝试使用 .insertAfter()，而不是 .after() :) - ˈvɔlə

这个 jsfiddle 是否满足您的要求？是 SlyBeaver 提供的。 - Pratik Joshi

为什么要询问在HTML标记中不可能和无效的东西？ - Pratik Joshi

Answer 1

我不这么认为，你要实现的目标是可以使用下拉选择框来实现的。在这里，我将修改我的HTML代码并使用CSS样式。

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

这是我的HTML代码：我使用ul li列表元素代替下拉菜单。

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

- Sandeep Pal

---

不错的解决方案！唯一的问题是当选择输入字段时，下拉菜单会自动关闭。 - Daniel

本来打算采用伪下拉框 +1 的解决方案作答。正如 @Daniel 所述，输入框无法被选中，但是OP没有明确指出应该在什么时候关闭它...（在选择选项时还是在输入完成后）。 - web-tiki

Answer 2

你不能向selectBlock添加DIV。但是你可以将选项添加到select中：

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

- SlyBeaver

---

这会在每个 click 事件上附加 div，目前还不好。 - Sudhanshu Saxena

哦，抱歉。请将.append(...)替换为.after(myDiv)。 - SlyBeaver

我会尝试修正我的回答，请您再查看一下。 - SlyBeaver

Answer 3

留下jQuery部分。通过设置包含DIV的静态HTML标记无法实现此目标。所以这是不可能的。您可以使用标记，但即使在Firebug中可以看到div附加到下拉列表中，它仍然会在浏览器中隐藏。

但如果您要求：在下拉列表中添加文本作为选项，则：

工作FIDDLE。

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

- Pratik Joshi

---

那不是他所询问的内容。问题是关于定位而非功能。 - Daniel

我已经说过了，检查三行代码。然后看看 但是如果您正在询问：在下拉菜单中添加文本作为选项，则请仔细阅读答案。 - Pratik Joshi

Answer 4

您可以将输入值添加到下拉列表中。

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

- Đặng Văn Thanh

---

他说我不需要将div添加到正确的下拉列表控制器中。 - SlyBeaver

Answer 5

为什么你想要在选项中添加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

的内容与编程有关。

- Mindaugas Večkys

Answer 6

据我所知，使用标准的HTML select/option标签是不可能实现这一点的。但有几个不同的库模拟下拉功能并提供其他附加功能。其中之一是UI Kit，它在许多其他功能中提供了这个功能。您可以将所谓的“网格”组件添加到下拉菜单中，实际上可以包含任何内容。在此处的“网格”标题下查看详细信息。

- Daniel