Question

我只想要这个功能。

即。自动填充文本框，其中包含可展开的下拉列表和下拉列表选项以及自动完成文本框

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

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

我找到了一些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或其他方法吗？

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

Answer 2

更改

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

到

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

动态数据的可扩展下拉列表

2 个答案: