使用jquery.editable-select遇404错误，求有效脚本源及下拉项编辑方案

问题描述 #

我尝试给下拉列表设置可编辑的第一项，但引入的脚本文件jquery.editable-select.pack.js返回404错误，请问有没有可用的更新版脚本源？以下是我的相关代码：

引入脚本代码 #

<script type="text/javascript" src="jquery.editable-select.pack.js"></script>

下拉列表代码 #

<td>@Html.DropDownListFor(m => m.test.model, new SelectList(new[] { "", "FCU", "Bellows" }), new { @id = "models"})</td>

编辑逻辑方法代码 #

$(function () {
    $('#models').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");
});

解决方案 #

1. 获取更新版脚本源 #

你使用的jquery.editable-select.pack.js是该插件的旧版压缩文件，目前该插件已更新，旧文件名不再使用。可以通过以下方式获取最新文件：

• 通过npm安装：执行命令 npm install jquery-editable-select，安装完成后从node_modules/jquery-editable-select/dist/目录中提取jquery.editable-select.min.js（压缩版脚本）和jquery.editable-select.min.css（配套样式），复制到你的项目静态资源目录。
• 直接下载插件源码包，提取dist目录下的上述两个文件到项目中。

2. 更新引入代码 #

替换原来的脚本引入，同时需要添加样式文件引入：

<link rel="stylesheet" href="你的文件路径/jquery.editable-select.min.css">
<script type="text/javascript" src="你的文件路径/jquery.editable-select.min.js"></script>

（注意将你的文件路径替换为实际存放文件的目录）

3. 适配新版插件的代码调整 #

新版插件中已移除bg_iframe参数（现代浏览器无需该兼容配置），同时this.text已改为this.$input，修改后的初始化代码如下：

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

内容的提问来源于stack exchange，提问作者Queen Mochi