个人中心
gpt4 book ai didi

javascript - 具有动态数据的可扩展下拉列表

转载 作者：行者123 更新时间：2023-11-30 16:19:40 24 4
gpt4 key购买 nike

我只是想要这个功能。

enter image description here

即带有可扩展下拉列表的自动完成文本框和下拉选择的元素放入自动完成文本框

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

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

我已经找到了一些 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"]');

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>

关于javascript - 具有动态数据的可扩展下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34939703/

24 4 0
文章推荐： c# - 从 Excel 中检索 "row pairs"
文章推荐： c - scanf() 格式字符串中尾随空格有何影响？
文章推荐： c# - 一般重新加载或刷新 WebBrowser 控件和窗体
文章推荐： c++ - 为什么结构体的 sizeof 不等于每个成员的 sizeof 之和？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com