te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Append div or span to a dropdown list - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Append div or span to a dropdown list - Stack Overflow

    javascript - Append div or span to a dropdown list - Stack Overflow

    programmeradmin4浏览0评论

    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.

    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.

    • javascript
    • jquery
    • html
    • css
    Share Improve this question asked Jul 24, 2014 at 8:29 ShmwelShmwel 1,6976 gold badges26 silver badges43 bronze badges 4
    • there must be some css role to clearly append and show hide plays – Sudhanshu Saxena Commented Jul 24, 2014 at 8:41
    • Change your js line this.append(myDiv) to $(myDiv).after($(this)). Or instead of .after(), you could try .insertAfter() :) – ˈvɔlə Commented Jul 24, 2014 at 8:50
    • Does this fiddle satisfy ur requirement? jsfiddle/8FkA4/58 GIVEN by SlyBeaver? – Pratik Joshi Commented Jul 24, 2014 at 8:54
    • Why are asking something which is NOT Possible and VALID in HTML Markup ? – Pratik Joshi Commented Jul 24, 2014 at 9:07
    Add a ment  | 

    6 Answers 6

    Reset to default 7

    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>

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

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

    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' ponents to the dropdown which can in fact contain anything you want. See detail over here under the headline 'Grid'.

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

    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

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论