我建议:
$('#header1_cbocity option:gt(4)').wrapAll('<optgroup label="country" />')
JS 小提琴演示。
我还建议添加一个明确的方法来识别哪些option
元素代表一个国家,在下面的演示中我使用了 a class
,但是data-*
可以很容易地使用自定义属性。鉴于标记:
<select id="header1_cbocity">
<option value="2">Ahmedabad</option>
<option value="4">Bangalore</option>
<option value="0" class="country">Bahamas</option>
<option value="14">Chennai</option>
<option value="20">Delhi</option>
<option value="33">Gurgaon</option>
<option value="167" class="country">Switzerland</option>
<option value="261" class="country">Tanzania</option>
<option value="168" class="country">Thailand</option>
<option value="263" class="country">Uganda</option>
<option value="169" class="country">United Kingdom (U.K)</option>
<option value="170" class="country">United States (U.S)</option>
</select>
(请注意,我已经添加Bahamas
(为了展示如何处理不连续的州/国家)。
使用以下 jQuery:
$('#header1_cbocity option.country')
.wrapAll('<optgroup label="country" />')
.closest('optgroup') // because otherwise wrapAll() returns the originally-found option elements
.appendTo('#header1_cbocity');
JS 小提琴演示。
此外,假设您已经放置了某种定义(在下面我使用自定义的, data-defn
, 属性),您可以创建optgroup
元素来包含这些:
<select id="header1_cbocity">
<option value="2" data-defn="state">Ahmedabad</option>
<option value="4" data-defn="state">Bangalore</option>
<option value="0" data-defn="country">Bahamas</option>
<option value="14" data-defn="state">Chennai</option>
<option value="20" data-defn="state">Delhi</option>
<option value="33" data-defn="state">Gurgaon</option>
<option value="167" data-defn="country">Switzerland</option>
<option value="261" data-defn="country">Tanzania</option>
<option value="168" data-defn="country">Thailand</option>
<option value="263" data-defn="country">Uganda</option>
<option value="169" data-defn="country">United Kingdom (U.K)</option>
<option value="170" data-defn="country">United States (U.S)</option>
</select>
使用 jQuery:
$('#header1_cbocity option').each(
function(){
var that = $(this),
defn = that.attr('data-defn'),
sel = that.closest('select'),
optgroup = sel.find('optgroup.' + defn);
if (!optgroup.length) {
$('<optgroup />', {'class' : defn, 'label' : defn}).appendTo(sel);
}
that.appendTo(sel.find('optgroup.' + defn));
});
JS 小提琴演示。
当然,对于只指定那些具有data-defn
属性的元素的选择器,您不一定需要为每个 option
元素提供这样的属性:
$('#header1_cbocity option[data-defn]').each(
function(){
var that = $(this),
defn = that.attr('data-defn'),
sel = that.closest('select'),
optgroup = sel.find('optgroup.' + defn);
if (!optgroup.length) {
$('<optgroup />', {'class' : defn, 'label' : defn}).appendTo(sel);
}
that.appendTo(sel.find('optgroup.' + defn));
});
JS 小提琴演示。
参考: