Jquery - Изменить динамический выпадающий выбранный элемент - PullRequest
Новая
       22

Jquery - Изменить динамический выпадающий выбранный элемент

2 голосов
/ 07 декабря 2009

У меня есть динамически генерируемый выпадающий список, для которого мне нужно изменить выбранное значение с помощью 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>

Один из способов - использовать весь идентификатор выпадающего меню (включая ctl00 ..): 

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

Можно ли с помощью CSS найти элемент и изменить значение, поскольку я не предпочитаю использовать идентификатор динамического элемента управления?

РЕДАКТИРОВАТЬ:

Я забыл упомянуть, что у меня есть 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?

Ответы [ 3 ]

6 голосов
/ 07 декабря 2009

Похоже, вы используете ASP.NET.

Неверно использовать полный идентификатор элемента управления ASP.NET (после рендеринга), потому что он может измениться в какой-то момент. Единственная часть идентификатора, которая гарантированно не будет изменена, - это последняя часть идентификатора, определенная в свойстве ID элемента управления ASP.NET.

Выберите этот элемент с помощью селектора с подстановочными знаками 

// 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", который должен быть только один!

0 голосов
/ 07 декабря 2009

Трудно сказать, не видя остальной разметки на странице, однако вам нужно обеспечить уникальность, чтобы получить правильный элемент выбора, чтобы идентификатор обычно был лучшей ставкой.

Если вы можете использовать точный идентификатор, так как он имеет лучшую производительность, однако вы запросили варианты, так что здесь.

Несколько вариантов:

$('select.txtfield') найдет все выборки с классом txtfield, поэтому может быть не уникальным.

Лучшая ставка может быть $('select.txtfield.country'), которую я считаю уникальной?

или «взломать» для веб-форм - использовать селектор конца-с 

$('select[id$=personalInformation_country]')
0 голосов
/ 07 декабря 2009

Вы имеете в виду, как это? 

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

Это установит выбор для всех выбранных элементов с классом CSS "страна"

Если вы хотите точно определить выбор, вам нужно будет использовать идентификатор / имя или убедиться, что он вложен так, что вы можете быть уверены, что его можно найти.

, например 

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