2

これは私の選択ボックスのコードです

     <select id="header1_cbocity">  
    <option  value="2">Ahmedabad</option>
    <option  value="4">Bangalore</option>
    <option  value="14">Chennai</option>
    <option  value="20">Delhi</option>
    <option  value="33">Gurgaon</option>
    <option  value="167">Switzerland</option>
    <option  value="261">Tanzania</option>
    <option  value="168">Thailand</option>
    <option  value="263">Uganda</option>
    <option  value="169">United Kingdom (U.K)</option>
    <option  value="170">United States (U.S)</option>
    </select>

そして、私は以下のような国だけにoptgroupラベルを追加したい 

    <select id="header1_cbocity">  
        <option  value="2">Ahmedabad</option>
        <option  value="4">Bangalore</option>
        <option  value="14">Chennai</option>
        <option  value="20">Delhi</option>
        <option  value="33">Gurgaon</option>
    <optgroup label="Country">
        <option  value="167">Switzerland</option>
        <option  value="261">Tanzania</option>
        <option  value="168">Thailand</option>
        <option  value="263">Uganda</option>
        <option  value="169">United Kingdom (U.K)</option>
        <option  value="170">United States (U.S)</option>
    </optgroup>
    </select>

jquery コードを試していますが、Country の optgroup ラベルを追加できませんでした。助けが必要です

4

2 に答える 2

10

私はお勧めします：

$('#header1_cbocity option:gt(4)').wrapAll('<optgroup label="country" />')

JS フィドルのデモ。

また、どの要素が国を表しているかを識別する明確な手段を追加することもお勧めしますoption。以下のデモでは を使用しました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 フィドルのデモ。

参考文献:

于 2012-10-08T11:15:23.030 に答える
1

HTMLを変更せずにDavid Thomasの回答を使用する

    $("#header1_cbocity option").each(function () {
        var optName = "Country";
        if ($(this).val() < 99) { return true; }
        var that = $(this);
        var sel = that.closest('select');
        var optgroup = sel.find('optgroup.' + optName);
        if (!optgroup.length) {
            $('<optgroup />', { 'class': optName, 'label': optName }).appendTo(sel);
        }
        that.appendTo(sel.find('optgroup.' + optName));
    });

2番目のoptgroupを作成するために、以下の条件を追加しました

        if ($(this).val() == 20) {
            optName = "mmmmmmmmm";
        }

2 番目の optgroup を含む完全なコード

    $("#header1_cbocity option").each(function () {
        var optName = "Country";
        if ($(this).val() < 99) { return true; } //you might need to convert to int
        if ($(this).val() == 20) {
           optName = "Dehli";
        }
        var that = $(this);
        var sel = that.closest('select');
        var optgroup = sel.find('optgroup.' + optName);
        if (!optgroup.length) {
            $('<optgroup />', { 'class': optName, 'label': optName }).appendTo(sel);
        }
        that.appendTo(sel.find('optgroup.' + optName));
    });
于 2013-11-06T00:34:10.150 に答える