2009-12-07 4 views
2

Jquery를 사용하여 선택한 값을 변경해야하는 동적으로 생성 된 드롭 다운이 있습니다.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를 사용하여이 작업을 수행 할 수 있습니까?

+0

CSS를 사용하여 값을 변경할 수 없습니다. – a432511

+0

질문에 대한 편집을 보았습니다. 페이지의 두 요소가 동일한 ID를 공유해서는 안됩니다. ID는 DOM에서 고유해야하며 반복해서는 안됩니다. 두 번째 선택의 ID를 "personalInformation_country2"와 같은 다른 것으로 변경하는 것을 고려하십시오. – a432511

답변

6

이 보이는 선택과 끝 - 더를 사용하는 것입니다.

일부 지점에서 변경 될 수 있으므로 전체 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' 모든 ID의 끝 "personalInformation_country"와, 하나를해야하는 일치하는 와일드 카드 선택하여 해당 항목을 선택합니다!

+0

이 매력처럼 작동합니다. 난 그냥 내 질문에 대한 자세한 설명을 추가, 당신은 그게 작동하게 만드는 방법을 볼 수 있습니까? :) 감사 !! - –

+0

질문에 대한 편집을 보았습니다. 페이지의 두 요소가 동일한 ID를 공유해서는 안됩니다. ID는 DOM에서 고유해야하며 반복해서는 안됩니다. 두 번째 선택 ID를 "personalInformation_country2"와 같은 다른 것으로 변경하는 것이 좋습니다. – a432511

0

이 뜻입니까?

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

이것은 CSS 클래스 "국가"당신은 더 나은 선택을 정확하게하려면

하면, 당신은 ID/이름을 사용하거나이 확인해야합니다 모든 선택 요소의 선택을 설정합니다 네가 찾을 수있는 방법으로 중첩되어있다.

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

당신이 ID가 일반적으로 최선 그래서 당신이 올바른 선택 요소를 얻을 수 있도록 uniquness를 확인해야하지만 페이지에 마크 업의 나머지 부분을 보지 않고 이야기하기 어렵다.

정확한 ID를 사용할 수있는 경우이 옵션이 가장 적합하지만 여기서는 옵션이 필요합니다.

몇 가지 옵션 :

$('select.txtfield')는 클래스 txtfield 모든 선택을 발견 할 것이다 따라서 고유하지 않을 수 있습니다.

$('select.txtfield.country') 더 나은 내기 일 수도 있습니다. 고유하다고 생각하십니까?

또는 웹 양식을위한 '해킹'는 ASP.NET을 사용하는 것처럼

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

이것은 매력과 같습니다. 내 질문에 더 많은 설명을 추가했습니다. 작동하도록 만드는 방법을 볼 수 있습니까? :) 감사 !! –

+0

당신은 무엇에 대해 – redsquare

관련 문제