Jquery - 更改动态下拉所选元素

Question

我有一个动态生成的下拉菜单，我需要使用 Jquery 更改所选值。

<select class="txtfield country" id="ctl00_MainContentAreaPlaceHolder_personalInformation_country" name="ctl00$MainContentAreaPlaceHolder$personalInformation$country"> 
    <option value="FJ">FIDJI</option>
    <option value="FI">FINLANDE</option>
    <option value="FR" selected="selected">FRANCE METROPOLITAINE</option>
    <option value="GA">GABON</option>
</select>

一种方法是使用下拉列表的整个 ID（包括 ctl00..）：

$j("#ctl00_MainContentAreaPlaceHolder_DeliveryPersonalInformation_country option[value='FR']").attr('selected', 'selected'); 

有没有一种方法可以使用 CSS 找到该元素并更改值，因为我不喜欢使用动态控件的 ID？

编辑：

我忘了提及，页面上有 2 个具有相同下拉名称的自定义控件。

所以自定义控件 1 生成：

<select class="txtfield ckgcountry" id="ctl00_MainContentAreaPlaceHolder_personalInformation_country" name="ctl00$MainContentAreaPlaceHolder$personalInformation$country">  ...
    <option value="ZW">ZIMBABWE</option>
</select>

客户控件 2 生成：

<select class="txtfield country" id="ctl00_MainContentAreaPlaceHolder_personalInformation_country" name="ctl00$MainContentAreaPlaceHolder$personalInformation$country">
    <option value="FJ">FIDJI</option>
    <option value="FI">FINLANDE</option>
    <option value="FR" selected="selected">FRANCE METROPOLITAINE</option>
    <option value="GA">GABON</option>
</select>

因此，使用代码，它仅更改在 DOM 中找到的第一个名称的值，我如何更改第二个名称的值...有办法吗这使用 CSS 吗？

Answer 1

看起来您正在使用 ASP.NET。

使用完整的 ASP.NET 控件 ID（渲染后）确实不可靠，因为它可能在某些时候发生变化。 ID 中唯一保证不更改的部分是在 ASP.NET 控件的 ID 属性中定义的 ID 的最后部分。

使用通配符选择器选择该项目

// Unselect the currently selected item
$("select[id$='personalInformation_country'] option:selected").removeAttr("selected");

// Select the option at index 0
$("select[id$='personalInformation_country'] option:eq(0)").attr("selected","selected");

，或者

// Select the option with value FR
$("select[id$='personalInformation_country'] option[value='FR']").attr("selected","selected");

$='personalInformation_country' 将匹配所有以“personalInformation_country”结尾的 ID，该 ID 只能是一个！

Answer 2

你的意思是这样吗？

$('select.country').val('FR');

这将为所有具有 CSS 类“country”的选择元素设置选择。

如果您想更好地定位选择，则需要使用 ID/名称或确保它以您可以确定的方式嵌套。位于。

例如

$('form[name=myForm] select.country').val('FR');//presuming there is only one

Answer 3

如果没有看到页面上的其余标记，很难判断，但是您需要确保唯一性，以便获得正确的选择元素，因此 id 通常是最佳选择。

如果您可以使用确切的 ID，因为这具有最佳性能，但是您要求选项，所以就这样了。

几个选项：

$('select.txtfield') 将查找具有 txtfield 类的所有选择，因此可能不是唯一的。

更好的选择可能是 $('select.txtfield.country') 我认为它是独一无二的？

或者网络表单的“黑客”是使用结尾选择器

$('select[id$=personalInformation_country]')