用動態數據展開下拉菜單

即自動完成與擴張下拉文本框和下拉式選擇的項目豎起來自動完成的文本框

我做自動完成工作正常，但我不能做擴張與動態數據下拉，

我有搜索一些帖子只顯示靜態數據的例子..

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

來源

2016-01-22 Neeraj Verma

您有不正確的選擇。使用'var $ select = $（「div [data-box-id =」demo「]」）;' –

檢查我的答案。請運行代碼段。 –

您已經使用不正確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>

來源

2016-01-22 05:48:20

做upvote如果它可以幫助你。 –

@NeerajVerma你在'ajax''中獲得數據''成功嗎？你的問題首先由'選擇器' –

工作正常，謝謝，你也可以告訴也獲得選定的值文本框 –

變化

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

到

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

來源

2016-01-22 05:46:47

在點擊，列表項目來與「未定義」 –

@Parth Trivedi是正確的，你使用不正確的選擇器，所以我改變'數據盒ID'爲'ID'，但'未定義'可能是數據的問題，你可以檢查「狀態」或使用數組進行測試。 –

謝謝，它幫助 –

用動態數據展開下拉菜單

回答

相關問題