我刚开始在我的网站上使用JQuery Chosen。在$(document).ready中为2个下拉列表调用.chosen()之后,我收到了这个输出:
https://www.mediafire.com/?3ld9sw734582usf
我使用ajax将数据推送到2个下拉列表。我是这样做的:
$.ajax({
type: "GET",
cache: false,
url: "/ServiceLocation/ShowServices",
beforeSend: function() {
$('#ddlSer').chosen();
},
success: function (data) {
$('#ddlSer').empty();
$.each(data, function(idx, elem) {
var serv = service.replace("[SERVICE]", elem.ServiceName);
serv = serv.replace("[SERVICEID]", elem.ServiceId);
$('#ddlSer').append(serv);
});
$('#ddlSer').trigger('liszt:updated');
},
error: function () {
alert('Could not get the list of services.');
return false;
}
});
$.ajax({
type: "GET",
cache: false,
url: "/ServiceLocation/ShowLocations",
beforeSend: function () {
$('#ddlLoc').chosen();
},
success: function (data) {
$('#ddlLoc').empty();
$.each(data, function(idx, elem) {
var loc = locat.replace("[LOCNAME]", elem.LocationName);
loc = loc.replace("[LOCID]", elem.LocationId);
$('#ddlLoc').append(loc);
});
$('#ddlLoc').trigger('liszt:updated');
},
error: function () {
alert('Could not get the list of locations.');
return false;
}
});
以下是我用于将数据附加到下拉列表的2个变量:
var service = "<option value='[SERVICEID]'>[SERVICE]</option>";
var locat = "<option value='[LOCID]'>[LOCNAME]</option>";
我做了什么使得2 Chosen下拉列表看起来像那样难看? 感谢您的帮助。提前谢谢!
P / S:我在将数据推送到下拉列表后尝试使用Chosen。它既不起作用也不起作用。
编辑:
我使用了selected.css和我的自定义。这是我的自定义CSS中与我选择的下拉列表相关的部分:
#ddlLoc_chzn .chzn-single {
height: 35px;
line-height: 35px;
width: 200px !important;
}
#ddlLoc_chzn b {
margin-top: 5px;
}
#ddlLoc_chzn .chzn-drop {
width: 200px !important;
}
#ddlLoc_chzn .chzn-search input {
width: 190px !important;
padding-right: 0px;
padding-left: 4px;
}