Javascript 如何根据已预选列表中的文本筛选下拉列表

Javascript 如何根据已预选列表中的文本筛选下拉列表,javascript,jquery,html,list,drop-down-menu,Javascript,Jquery,Html,List,Drop Down Menu,我正在尝试根据第一个预选列表中的文本筛选下拉列表。第一个列表包含“美国”作为预选,要筛选的列表是第二个下拉菜单。我希望您能就如何解决这一问题提供意见 <ul> <li class="">Argentina</li> <li class="selected">United States</li> <li class="">Australia</li> </ul> <sele

我正在尝试根据第一个预选列表中的文本筛选下拉列表。第一个列表包含“美国”作为预选,要筛选的列表是第二个下拉菜单。我希望您能就如何解决这一问题提供意见

<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>
  • 阿根廷
  • 美国
  • 澳大利亚
阿根廷 美国 澳大利亚
问题是不需要用户输入,因为列表是预先选择的,在本例中为“美国”。下拉列表中的输出应该只包含“美国”,隐藏其他国家

我曾经问过一个类似的问题,在那之前我已经得到了回答


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

我本以为这会起作用,但对我来说不行:

$('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);   
}
}))

在这里玩一玩:


我不知道为什么您想要一个只有一个项目的列表,但您可以使用此代码隐藏未选中的项目

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

我认为,如果您在问题中还添加了一个JSFIDLE示例,将会有所帮助。如果列表是预先选择的,您希望在下拉HTML中的其他选项是什么?