Question

我有一个动态生成的Dropdown，我需要使用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，该应该只有一个！

Answer 2

你的意思是这样吗？

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

这将为CSS类“country”

设置所有选择元素的选择

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

e.g。

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

Answer 3

如果没有看到页面上剩余的标记就很难分辨，但是你需要确保单一性，这样你才能获得正确的选择元素，因此id通常是最好的选择。

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

一些选择：

$('select.txtfield')会找到类txtfield的所有选择因此可能不是唯一的。

我认为$('select.txtfield.country')更好的选择可能是唯一的吗？

或webforms的'hack'是使用ends-with选择器

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

Jquery - 更改动态下拉列表选定元素

3 个答案: