Question

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

<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>

问题是用户输入不是必需的，因为列表是预选的，在这种情况下是“美国”。下拉列表中的输出应仅包含隐藏其他国家/地区的“美国”。

我之前曾问过类似的问题here。

但我正在寻找一种方法，只使用列表菜单中的文本，即不对现有HTML进行任何更改。

Answer 1

我不确定为什么你想要一个只有一个项目的列表，但你可以用这个代码来隐藏未选择的项目

$('option:contains("' + $('.selected').text() + '")').siblings().hide();

Answer 2

我原以为这会起作用，但它不适合我：

$('select#CountryCode').find('option[text="' + $('ul>li.selected').text() + '"]').prop("selected", true);

相反，这将完成工作：

$('select#CountryCode option').each(function () {
if ($(this).text() == $('ul>li.selected').text())
{
     $(this).prop("selected", true);   
}

}）;

在这里玩一玩：

http://jsfiddle.net/B8tMU/

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

2 个答案: