Javascript 从剑道下拉列表中删除下划线

这个看起来很简单，只是不确定在哪里处理。我正在通过RESTJSON从SQL数据库检索列名值。下拉列表中的值具有预期的下划线（客户名称）。我想显示一个没有下划线的“友好”（客户名称）版本，但仍然将我的值（客户名称）发送给我的REST服务。我查看了underline.js，但不确定从哪里开始，这可能比我想象的要简单。谢谢

我不知道您是如何从rest服务接收数据的

但基本上，您只需映射REST服务接收到的数据，并根据需要更改值

以下是一些示例代码：

// Call to the REST service and when done call the callback function loadDDL
$.ajax({
  type: "POST",
  url: "my-rest-service"
}).done(loadDDL);


// Callback function when returning from the REST service
// -> load data in the DDL (here, it has the id "my-ddl")
function loadDDL(data) { 
  $("#my-ddl").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: _.map(data, makeFriendlyName),
    index: 0
  }); 
}


// Function used by the _.map function in order 
// change dynamically the labels in the DDL
function makeFriendlyName(obj) {
  return { 
    text: obj.text, 
    value: obj.value.replace("_", " ") 
  };
}

---

编辑：

基于OP的fiddle，以下是使用模板而不是直接更改数据源的示例代码：

function loadDDL(data) { 
  $("#my-ddl").kendoDropDownList({
    autoBind: true,
    dataTextField: "DOMAINQUERY",
    dataValueField: "COLUMN_NAME",
    dataSource: dataSourceSearch1,
    template: "${DOMAINQUERY.replace(/_/g, ' ')}"
  }); 
}

var dataSourceSearch1 = new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://demos.kendoui.com/service/Customers",
            dataType: "jsonp"
        }
    },
    change: changeDS // <-- Here add a change event : each time the datasource changes, this event is being raised
});


// This is the function call when the DS changes
// the data stuff is in the `items` property which is the object send via the REST service
function changeDS(datasource) {
    _.map(datasource.items, makeFriendlyName);
}


// Function to apply to each data -> here I just replace all spaces in the 
// `ContactName` field by `_`
function makeFriendlyName(data) {
    data.ContactName = data.ContactName.replace(/ /g, '_');
    return data;
}


// Fill the DDL with the previous datasource
var cboSearchField1 = $("#cboSearchField1").kendoDropDownList({
    dataTextField: "ContactName",
    dataValueField: "ContactName",
    filter: "contains",
    autobind: true,
    select: cboSearchField1_Selected,
    change: cboSearchField1_onChange,
    dataSource: dataSourceSearch1
}).data("kendoDropDownList");

---

编辑2:

为了直接翻译数据源，我再次通过动态更改数据源的

change

事件中的文本来重新映射数据源：

function loadDDL(data) { 
  $("#my-ddl").kendoDropDownList({
    autoBind: true,
    dataTextField: "DOMAINQUERY",
    dataValueField: "COLUMN_NAME",
    dataSource: dataSourceSearch1,
    template: "${DOMAINQUERY.replace(/_/g, ' ')}"
  }); 
}

var dataSourceSearch1 = new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://demos.kendoui.com/service/Customers",
            dataType: "jsonp"
        }
    },
    change: changeDS // <-- Here add a change event : each time the datasource changes, this event is being raised
});


// This is the function call when the DS changes
// the data stuff is in the `items` property which is the object send via the REST service
function changeDS(datasource) {
    _.map(datasource.items, makeFriendlyName);
}


// Function to apply to each data -> here I just replace all spaces in the 
// `ContactName` field by `_`
function makeFriendlyName(data) {
    data.ContactName = data.ContactName.replace(/ /g, '_');
    return data;
}


// Fill the DDL with the previous datasource
var cboSearchField1 = $("#cboSearchField1").kendoDropDownList({
    dataTextField: "ContactName",
    dataValueField: "ContactName",
    filter: "contains",
    autobind: true,
    select: cboSearchField1_Selected,
    change: cboSearchField1_onChange,
    dataSource: dataSourceSearch1
}).data("kendoDropDownList");

var datasourcesearch=new kendo.data.DataSource({
运输：{
阅读：{
url:“http://demos.kendoui.com/service/Customers",
数据类型：“jsonp”
}
},
change:changeDS//这里我只替换
//`ContactName`字段由`_`
函数makeFriendlyName（数据）{
data.ContactName=data.ContactName.replace（//g，'.'）；
返回数据；
}
//用上一个数据源填充DDL
var cboSearchField1=$（“#cboSearchField1”）。kendoDropDownList({
dataTextField:“ContactName”，
dataValueField:“ContactName”，
过滤器：“包含”，
自动绑定：是的，
选择：cboSearchField1\u已选择，
更改：cboSearchField1\u onChange，
数据源：数据源搜索1
}).数据（“kendoDropDownList”）；

Samuel，谢谢。我正在尝试了解并喜欢您使用.done（loadDDL）的方式.然而，我做的有点不同，也许你可以指出我需要在哪里插入u.map。我通过变量引用数据源，在那里你有uu.map。不确定这是否提供了足够的信息？@Scott你能再详细一点你的代码吗？这里我只使用

.map

，以便根据你的r创建一个友好的名称est服务并将其发送到DDL的数据源，正如您在我的代码中所看到的那样…谢谢@Samuel，如果这不够雄辩，我向您道歉，但在这里您可以看到我正在使用的内容。如果您对我如何使其不那么复杂提出建议，那将是非常棒的。谢谢您的帮助，期待您的回复。@Scott I have更新了你的。由于你的REST服务是本地的，我已经为剑道UI的演示改了一个，但原理是一样的：在

{

和

}

中使用模板ans，你可以使用javascript代码，所以这里我用

替换了所有空格（因为它们的数据中没有

）.嘿，这是我见过的最简单的方式！DropDownList在打开时不显示下划线，但在关闭时所选项目仍显示下划线。