동적으로 생성 된 선택 상자를 아약스로 채우는 방법

Question

이 프로젝트에서 발생하는 특정 문제에 대한 해결책을 찾을 수 없었습니다. 두 개의 선택 상자가 포함 된 테이블에 행을 동적으로 추가하고 첫 번째 선택 상자의 값을 기준으로 두 번째 선택 상자의 선택 옵션을 자동 채우기 ... ajax를 사용하여 해당 테이블 행에 추가합니다. (일부 js에 의해 동적으로 추가되었습니다).

아직 나와 함께 있니?

첫 번째 행의 첫 번째 드롭 다운 값을 기반으로 ajax/javascript를 사용하여 선택 드롭 다운을 동적으로 쉽게 채울 수 있습니다. 심지어 ajax/js 함수를 사용하여 각각의 추가 선택을로드하는 동일한 행에 세 개 이상의 선택 상자를 채울 수도 있습니다. 그러나 이것은 내 목표가 아닙니다.

내가 가지고있는 것 ... 내 양식에는 3 개의 열이있는 간단한 테이블이 있습니다. 첫 번째는 체크 박스이고, 두 번째는 "주"선택 상자이고 세 번째 열은 "도시"선택 상자입니다. 나는 "Add Row"와 "Delete Row"를 허용하는 테이블 위에 두 개의 버튼을 가지고 있습니다. 첫 번째 행 (프로그래밍 된)은 아약스를 사용하여 한 도시의 도시 이름을로드하는 데 완벽하게 작동합니다.

Add Row 버튼을 클릭하면 체크 박스, 상태 선택 및 도시 선택 필드가 포함 된 두 번째 행을 동적으로 만들 수 있습니다. 상태 선택은 원래 열의 innerHTML 내용을 기반으로 채워지지만 도시 선택은 아약스가 채울 것으로 예상하기 때문에 분명히 null입니다. 참고 :이 필드의 이름과 ID 이름은 반복됩니다 ... city_id, city_id_1, city_id_2, city_id_3 등 ... 그래서 나는 함께 일할 독창성을 가지고 있습니다.

내 문제는 두 번째 또는 세 번째 (및 기타) 행에서 상태를 선택할 때 firstcity select 만 변경된다는 사실입니다. 왜? js/ajax 처리 함수는 "city_id"라는 이름의 요소에서만 작동하기 때문에! 첫 번째 행의 도시 선택 상자의 이름입니다.

나는 onreadystate ajax 함수로 업데이트해야하는 요소의 이름을 동적으로 전달하는 방법을 찾지 못했습니다. 두 줄 또는 세 줄의 셀렉트 박스를 같은 행에 채워야 할 때, 각 드롭 다운에 대해 보완적인 아약스 함수를 가져야했습니다. 정적인데 마음은 ...하지만 요소를 동적으로 ?? 나는 많은 기능들을 내 페이지에 미리 프로그램 할 수 없다 ... 아니면 내가해야만 하는가?

이 작업을 수행하는 방법에 대한 아이디어가 있으면 감사드립니다.

감사합니다.

Answer 1

var i=1; // put here the number of the column being added now. 
var x=document.getElementById("city_id_"+i); 
// populate x