带有动态数据的可扩展下拉列表答案

【问题标题】：expandable dropdown with dynamic data带有动态数据的可扩展下拉列表
【发布时间】：2016-04-28 15:21:33
【问题描述】：

我只是想要这个功能。

即带有可扩展下拉列表的自动完成文本框和下拉所选项目放置到自动完成文本框

我使自动完成工作正常，但我无法使用动态数据制作可扩展的下拉列表，

我搜索了一些仅显示静态数据示例的帖子..

我找到了一些 jquery 插件，这也适用于静态数据

http://www.jqueryscript.net/menu/Lightweight-Popup-Menu-Plugin-For-jQuery-Popr.html

这是我尝试过的代码

<head>    
<div class="popr" data-id="demo">Click me</div>
    <div class="popr-box" data-box-id="demo">
     <div >Menu Item 1</div>                    ---fine with static data
     <div >Menu Item 2</div>
    </div>
</head>

$(document).ready(function () {
populate();
}

function populate(){
        $.ajax({
            //.....           
            success: function(states) {
             var $select = $('#demo'); // --dynamic data not binding to demo   
                                          --div 
                $.each(states, function(i, state) {
                    $('<option>', {
                        value: state
                    }).html(state).appendTo($select); });},});}
//this is plugin code 

 $('.popr').popr();


    $('.popr').popr({
        'speed': 200,
        'mode': 'bottom'
    });

我需要一些帮助，我需要用 css 或其他方法为它做不同的方法吗？

【问题讨论】：

您的选择器不正确。使用var $select = $("div[data-box-id="demo"]");
检查我的答案。请运行 sn-p。

标签： javascript jquery html css

【解决方案1】：

您使用了错误的selector。你有使用喜欢

var $select = $('div[data-box-id="demo"]');

alert($select.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>    
<div class="popr" data-id="demo">Click me</div>
    <div class="popr-box" data-box-id="demo">
     <div >Menu Item 1</div>                   
     <div >Menu Item 2</div>
    </div>
</head>

【讨论】：

@NeerajVerma 你在ajax success 中得到数据吗？ selector 解决了你的第一个问题
现在工作正常，谢谢，你能不能告诉我把选定的值放到文本框里
@NeerajVerma do $select.val()
我应该在哪个事件上发布它？？ ............. 我试过 $('div[data-box-id="demo"]').change(function () { }); ............. 和 ...... $('div[data-id="demo"]').change(function () {} ); .....但它不起作用
我还在寻找第二个答案

【解决方案2】：

改变

<div class="popr-box" data-box-id="demo">

到

<div class="popr-box" id="demo">

【讨论】：

点击时，列表项带有“未定义”
@Parth Trivedi 是对的，你使用了不正确的选择器，所以我将 'data-box-id' 更改为 'id'，但 'undefined' 可能是数据的问题，你可以检查“状态" 或者使用数组来测试。
你能告诉我应该如何在哪个事件上获得选定的值到文本框..我试过 $('div[data-box-id="demo"]').change(function () { }); ............. 和 ...... $('div[data-id="demo"]').change(function () {} ); .....但它不起作用 -