從自動填充下拉值

Question

我需要從下拉列表中指定的值自動完成文本框..till現在我已經做到了這一點

---

---

---

---

，但你可以請參閱我無法從下拉列表中將值分配給文本框.. 我已經通過JQuery PlugIn實現了自動完成功能「 Prop.js」

這是我搜索的解決方案的嘗試了內部DIV點擊即可選擇價值

$(".popr-item").click(function (e) { 
    e.stopPropagation(); 

}); 

$(".popr-box").click(function (e) { 
    e.stopPropagation(); 
    alert("popr-box"); 
}); 

這個我已經創建

<link href="~/Content/popr.css" rel="stylesheet" /> 
    <script src="~/Scripts/popr.js"></script> 
    <script src="~/Scripts/popr.min.js"></script> 

<div id="address" > 

<label>Country</label> 

    <table> 
     <tr> 
      <td>@Html.TextBox("Country")</td> 
      <td> 
       <div class="popr" data-id="demo">^</div> 
       <div class="popr-box" data-box-id="demo"> 

       </div> 
      </td> 
     </tr> 
    </table> 



</div> 

<script type="text/javascript"> 

$(document).ready(function() { 

    $("#Country").autocomplete({ 
     source: function (request, response) { 

      $.ajax({ 
       url: "/Location/GetAllCountry", 
       type: "POST", 
       dataType: "json", 
       data: { term: request.term }, 
       success: function (data) { 
        response(data); 

       } 
      }) 
     }, 
     appendTo: '#menu-container', 
     messages: { 
      noResults: "", results: "" 
     } 
    }); 

    $.ajax({ 
     url: "/Location/GetAllCountry", 
     type: 'POST', 
     data: { term: "" }, 
     success: function (states) { 

      var $select = $('div[data-box-id="demo"]'); 
      $.each(states, function (i, state) { 
       $('<option>', { 
        value: state 
       }).html(state).appendTo($select) 
       .addClass("popr-item"); 
      }); 
     }, 
     error: function (xhr) { alert("Something seems Wrong"); } 
    }); 

}); 

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


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

代碼不工作

我試過另一個插件「選擇」..但它失敗casca丁下拉..我在一個位置，嘗試另一種插件，我不是...我嚴格想這樣

如果有另一個插件可用，我需要看例子與級聯下拉專門

我使用只需要從下拉列表中選擇的值，我如何實現這一目標？

Answer 1

在自動完成添加此選擇選項

$("#Country").autocomplete({ 
     source: function (request, response) { 

      $.ajax({ 
       url: "/Location/GetAllCountry", 
       type: "POST", 
       dataType: "json", 
       data: { term: request.term }, 
       success: function (data) { 
        response(data); 

       } 
      }) 
     }, 
       select: function(event, ui) { 
          $("#Country").val(ui.item.label); 
          return false; 
         }, 
     appendTo: '#menu-container', 
     messages: { 
      noResults: "", results: "" 
     } 
    });