jquery - 如何在 ASP.NET MVC 中制作可编辑的 DropDownList 以获得正确的值？

Question

我在 MVC 4 中使用这个插件来获取可编辑的 DropDownList:

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

我所做的是:
1- 将脚本包含在脚本文件夹下。
2-在我的css文件的最后部分添加css部分。
3- 将图像添加到我的内容文件夹中。
5-将该功能添加到我的局部 View 中。

功能:

$(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 bootstrap 中使用 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");
});

就是这样。现在，您将能够看到可编辑的选择。