Question

我的列表看起来像这样：

<select>
    <option value="All" selected="selected">- Any -</option>
    <option value="16">Africa</option>
    <option value="17">Asia</option>
    <option value="56">-China</option>
    <option value="57">-Japan</option>
    <option value="19">Canada</option>
    <option value="20">-Alberta</option>
    <option value="21">-British Columbia</option>
    <option value="22">-Manitoba</option>
    <option value="23">-New Brunswick</option>
    <option value="24">-Newfoundland &amp; Labrador</option>
    <option value="25">-Northwest Territories</option>
    <option value="26">-Nova Scotia</option>
    <option value="27">-Nunavut</option>
    <option value="28">-Ontario</option>
    <option value="29">-Prince Edward Island</option>
    <option value="30">-Quebec</option>
    <option value="31">-Saskatchewan</option>
    <option value="32">-Yukon</option>
    <option value="33">Central &amp; South America</option>
    <option value="34">Europe</option>
    <option value="35">Republic of Ireland</option>
    <option value="36">United Arab Emirates</option>
    <option value="37">United Kingdom</option>
    <option value="38">-England</option>
    <option value="39">-Northern Ireland</option>
    <option value="40">-Scotland</option>
    <option value="41">-Wales</option>
</select>

我无法更改HTML，但需要通过jQuery将选择分为两个选项，然后首先显示顶级选项，例如，如果选择加拿大，则显示省份的第二个下拉菜单。这必须是动态的，因为基础列表可能随时间而变化。

我知道如果有optgroups会更容易，但不幸的是，这是我无法控制的。所以基本上我需要在浏览器中将这个简单的列表转换为分层选择。

Answer 1

您可以使用以下查询来分割大陆和国家/地区选择框。

注意 - 将id="select"放入主选择框。

$(function(){
    var continent='';

    $('#select option:gt(0)').each(function(){
      var value = $(this).val();
      //check if option text don't have '-' in it, then take it as
      // continent and create a select box with same id
      if($(this).text().indexOf("-")==-1 && continent!=value)
      {
        continent=value;
          $('#select').after('<select id="'+continent+'" style="display:none" class="country"></select>');
      }
      else
      {
        //add option to the newly created select box    
          $('#'+continent).append($(this));
      }  
    });

    //remove all country select box which are empty
    $('.country').filter(function(){
        return $(this).children().length ==0;
    }).remove();

    //bind change event to select box to show / hide country select box
    $('#select').change(function(){
       $('.country').hide();
       $('#'+$(this).val()).show();
    });
});

<强> DEMO

Jquery函数将选项列表拆分为分层选择

1 个答案: