如何根据已预先选择的列表过滤下拉列表

时间:2014-05-13 11:14:02

标签: javascript jquery html drop-down-menu filter

我正在尝试根据第一个预选列表过滤下拉列表。第一个列表包含'美国'作为预选择,要过滤的列表是第二个下拉菜单。我很感激如何解决这个问题。

<ul>
    <li class="">Argentina</li>
    <li class="selected">United States</li>
    <li class="">Australia</li>
</ul>
<select data-val="false" data-val-length="Only 64 characters allowed." data-val-length-max="64" data-val-required="Country code can't be empty" id="CountryCode" name="CountryCode" class="valid">
    <option value="ARG">Argentina</option>
    <option value="USA">United States</option>
    <option value="AUS">Australia</option>
</select>

此致

平硐

1 个答案:

答案 0 :(得分:0)

<强>的jQuery

获取所选国家/地区,然后使用attribute-equals-selector找到<option>并隐藏兄弟姐妹

$(function () {
    var country = $('.selected').data('country');
    $('#CountryCode').find('[value="' + country + '"]').siblings().hide();
    $('#CountryCode').val(country);
});

<强> HTML

data-*属性添加到html元素

<ul>
    <li data-country="ARG">Argentina</li>
    <li data-country="USA" class="selected">United States</li>
    <li data-country="AUS">Australia</li>
</ul>

DEMO