如何在ASP.NET MVC中創建可編輯的DropDownList以獲取正確的值？

Question

我使用這個插件，在MVC 4，得到一個可編輯的DropDownList：

http://coffeescripter.com/code/editable-select/

我所做的是：
1-包括腳本，腳本文件夾下。
2-在我的css文件的最後部分添加css部分。
3-將圖像添加到我的內容文件夾。
5-將函數添加到我的局部視圖中。

功能：

$(function() { 


     $('#lugar').editableselect(
      { 
       bg_iframe: true, 

       onselect: function (list_item) { 
        alert('list item text: ' + list_item.text()); 
        // 'this' is a reference to the instance of editableselect 
        // object, so you have full access to everything there 
        alert('input value: ' + this.text.val()); 
       }, 
       case_sensitive: false, // if set to true, the user has to type in an exact 
       // match for the item to get highlighted 
       items_then_scroll: 10 // if there are more than 10 items, display a scrollbar 
      } 
     ); 
     var select = $('#lugar:first'); 
     var instances = select.editableselectinstances(); 
     instances[5].addoption('germany, value added programmatically'); 
    }); 

6-類添加到我的領域。

<div class="editor-field editableSelect"> 
    @Html.EditorFor(model => model.Lugar) 
    @Html.ValidationMessageFor(model => model.Lugar) 
</div> 

問題
1 - 我得到的名單（不包括圖像），但與它錯誤的價值觀。我不知道它從哪裏獲得這些值。
2-我沒有看到我傳遞給列表的值，你能以正確的方式引導我嗎？

在此先感謝。

Answer 1

我能夠在ASP.NET MVC 4和twitter引導中使用coffeescript顯示可編輯選擇。

請看下面的詳細信息，

在你的MVC項目中，添加引用必要的CoffeeScript和jQuery（我使用jQuery的1.9.1.js）文件。

1. 在View，添加以下代碼，

<select id="user_name_ddl" class="editable-select"> 
</select> 

在項目中

打開 'jquery.editable-select.css' 和更新正確的圖像位置，

input.editable-select { 
    background: #FFF url(images/arrow-down.gif) right center no-repeat; 
    padding-right: 13px; 
    cursor:pointer; 
} 

注意：我將向下箭頭的圖像複製到我的MVC項目中的圖像文件夾中。

在自定義js文件（如果沒有，創建一個）添加以下代碼行，

$(function() { 
    $('.editable-select').editableSelect({ 
    bg_iframe: true, 
    onSelect: function (list_item) { 
     $('#results').html('List item text: ' + list_item.text() + '<br/> \ 
     Input value: ' + this.text.val()); 
     } 
    }); 
    var select = $('.editable-select:first'); 
    var instances = select.editableSelectInstances();  
    if (instances != null 
     && instances != undefined 
     && instances.length > 0) instances[0].addOption("Item 1"); 
}); 

就是這樣。現在，您將能夠看到可編輯的選擇。