2

我在 MVC 4 中使用这个插件来获得一个可编辑的下拉列表：

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-我看不到将我想要的值传递给列表的位置，你能以正确的方式指导我吗？

提前致谢。

4

1 回答 1

0

我能够在 ASP.NET MVC 4 和 twitter 引导程序中使用咖啡脚本显示可编辑的选择。

请看下面的详细信息，

在您的 MVC 项目中，添加对必要的 coffeescript 和 jquery（我使用 jquery-1.9.1.js）文件的引用。

  1. 在视图中，添加以下代码，
<select id="user_name_ddl" class="editable-select"> 
</select>
  1. 在您的项目中打开“jquery.editable-select.css”并更新正确的图像位置，
input.editable-select {
  background: #FFF url(images/arrow-down.gif) right center no-repeat;
  padding-right: 13px;
  cursor:pointer;
}

注意：我将向下箭头的图像复制到我的 MVC 项目中的图像文件夹中。

  1. 在您的自定义 .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");
});

而已。现在，您将能够看到可编辑的选择。

于 2013-11-08T23:50:43.697 回答