我在同一页面上有多个 jquery 组合框，我想设置每个不同的宽度（和其他样式）。修改这些 jquery 类会改变所有这些，但我想单独设置样式。怎么做？
这是一个工作示例，
或者
如果您愿意，您可以查看下面的代码。
CSS：（这改变了所有这些）
.ui-combobox-input
{
margin: 0; /*original value*/
padding: 0.3em; /*original value*/
width: 90px; /*change the default autocomplete textbox width (too wide)*/
}
/*this is for the dropdown box*/
.ui-autocomplete
{
max-height: 400px; /*limits dropdown list height*/
overflow-y: auto; /* prevent horizontal scrollbar */ /*limits dropdown list height*/
overflow-x: hidden; /* add padding to account for vertical scrollbar */ /*limits dropdown list height*/
z-index:1000 !important; /*limits dropdown list height*/
}
HTML
<div id="searchControlsBasic" runat="server" class="searchControlsBasic">
<div id="minPrice">
<select id="selMinPrice" class="selMinPrice" tabindex="3">
<option value=“”>No Min</option>
<option value=“50000”>50,000</option>
<option value=“75000”>75,000</option>
</select>
</div>
<div id="maxPrice">
<select id="selMaxPrice" class="selMaxPrice" tabindex="4">
<option value=“”>No Max</option>
<option value=“50000”>50,000</option>
<option value=“75000”>75,000</option>
</select>
</div>
<div id="beds">
<select id="selBeds" class="selBeds" tabindex="5">
<option value=“0”>0+</option>
<option value=“1”>1+</option>
<option value=“2”>2+</option>
</select>
</div>
<div id="baths">
<select id="selBaths" class="selBaths" tabindex="6">
<option value=“0”>0+</option>
<option value=“1”>1+</option>
<option value=“1.5”>1.5+</option>
</select>
</div>
</div>
Javascript：（与组合框演示几乎相同）
$(document).ready(function()
{
$.widget("ui.combobox", {
_create: function ()
{
var input,
self = this,
select = this.element.hide(),
selected = select.children(":selected"),
value = selected.val() ? selected.text() : "",
wrapper = this.wrapper = $("<span>")
.addClass("ui-combobox")
.insertAfter(select);
input = $("<input>")
.appendTo(wrapper)
.val(value)
.addClass("ui-state-default ui-combobox-input")
.autocomplete({
delay: 0,
minLength: 0,
autoFocus: true,
source: function (request, response)
{
var requestTermNoCommas = request.term.replace(/,/g, "");
//var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); //original
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(requestTermNoCommas), "i");
response(select.children("option").map(function ()
{
var text = $(this).text(); //original
var textNoCommas = $(this).text().replace(/,/g, "");
//if (this.value && (!request.term || matcher.test(text))) //original
if (this.value && (!request.term || matcher.test(textNoCommas)))
return {
//label: text.replace( //original
label: textNoCommas.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
//$.ui.autocomplete.escapeRegex(request.term) + //original
$.ui.autocomplete.escapeRegex(requestTermNoCommas) +
")(?![^<>]*>)(?![^&;]+;)", "i"
), "<strong>$1</strong>")
// adds the thousands comma seperator after every third digit and takes into account the optional bold html markup
.replace(/((<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?)(?=((<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?)+(?!(<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?))/g, "$1,"),
value: text,
option: this
};
}));
},
select: function (event, ui)
{
ui.item.option.selected = true;
self._trigger("selected", event, {
item: ui.item.option
});
},
change: function (event, ui)
{
if (!ui.item)
{
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
valid = false;
select.children("option").each(function ()
{
if ($(this).text().match(matcher))
{
this.selected = valid = true;
return false;
}
});
// disabling this block since we want to leave custom values in combobox (that are conforming)
/*if (!valid)
{
// remove invalid value, as it didn't match anything
$(this).val("");
select.val("");
input.data("autocomplete").term = "";
return false;
}*/
}
}
})
.addClass("ui-widget ui-widget-content ui-corner-left")
.focus(function() // for selecting text on focus
{
// fixes a bug in chrome, firefox, and safari as well (opposed to just using $(this).select())
$(this).select().mouseup(function (e)
{
e.preventDefault();
$(this).unbind("mouseup");
});
});
input.data("autocomplete")._renderItem = function (ul, item)
{
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
$("<a>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.appendTo(wrapper)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-combobox-toggle")
.click(function ()
{
// close if already visible
if (input.autocomplete("widget").is(":visible"))
{
input.autocomplete("close");
return;
}
// work around a bug (likely same cause as #5265)
$(this).blur();
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
});
},
destroy: function ()
{
this.wrapper.remove();
this.element.show();
$.Widget.prototype.destroy.call(this);
}
});
});
$(document).ready(function()
{
// setup min & max price, beds, and baths comboboxes
$(".selMinPrice").combobox();
$(".selMaxPrice").combobox();
$(".selBeds").combobox();
$(".selBaths").combobox();
$("#toggle").click(function ()
{
$(".selMinPrice").toggle();
$(".selMaxPrice").toggle();
$(".selBeds").toggle();
$(".selBaths").toggle();
});
});