2013-02-27 7 views
0

동적으로 테이블에 행을 추가하고 있습니다. 각 행에는 입력 필드와 드롭 다운 필드가 있습니다. 드롭 다운에서 '기타'를 선택하면 설명 필드를 비활성화 할 수 있습니다. 동적으로 추가 된 행의 드롭 다운 상자를 어떻게 확인합니까?동적으로 생성 된 드롭 다운 상자에서 선택한 값 확인

다음은 내 코드입니다. 행 삽입 제대로 작동하지만 드롭 다운 상자의 선택한 값을 확인하는 방법을 모르겠습니다.

<script language="javascript" type="text/javascript"> 
function addRow() { 
    var tbl = document.getElementById('tblSample'); 
    var lastRow = tbl.rows.length; 
    var iteration = lastRow; 
    var row = tbl.insertRow(lastRow); 

    var cellLeft = row.insertCell(0); 
    var textNode = document.createTextNode(iteration-3); 
    cellLeft.appendChild(textNode); 

    var cellRightSel = row.insertCell(1); 
    var sel = document.createElement('select'); 
    sel.name = 'LOCsel' + iteration; 
    sel.options[0] = new Option('---Any---', '0'); 
    sel.options[1] = new Option('Level 0.5: Early Intervention', '1'); 
    sel.options[2] = new Option('Level I: Outpatient', '2'); 
    sel.options[3] = new Option('Level I.D: Outpatient-Detox', '3'); 
    sel.options[4] = new Option('Level II.1: Intensive Outpatient', '4'); 
    sel.options[5] = new Option('Level II.5: Partial Hospitalization', '5'); 
    sel.options[6] = new Option('Level II.D: IOP-Detox', '6'); 
    sel.options[7] = new Option('Level III.1: Halfway House', '7'); 
    sel.options[8] = new Option('Level III.3: Long-Term Residential Care', '8'); 
    sel.options[9] = new Option('Level III.5: Therapeutic Community', '9'); 
    sel.options[10] = new Option('Level III.7: Medically Monitoried Inpatient(ICF)', '10'); 
    sel.options[11] = new Option('Level III.7.D: Med.Mon.Inpatient(ICF)-Detox', '11'); 
    sel.options[12] = new Option('Other', '12'); 
    cellRightSel.appendChild(sel); 

    var cellRights = row.insertCell(2); 
    var els = document.createElement('input'); 
    els.type = 'text'; 
    els.name = 'Comments' + iteration; 
    els.id = 'Comments' + iteration; 
    els.size = 30; 
    cellRights.appendChild(els); 

    var cell8 = row.insertCell(9);    
    var element8 = document.createElement('input');    
    element8.type = 'text';    
    element8.name = 'txtRow'+ iteration; 
    element8.id = 'txtRow'+ iteration; 
    cell8.appendChild(element8); 
    element8.size = 20; 
    } 

function validateLOC(){ 
    var table = document.getElementById('tblSample'); 
    var rowCount = table.rows.length; 

    for (var i=0; i < rowCount; i++) { 
var loc = table.rows[i].cells[1].getElementById('LOCsel')[i]; 
var strUser = loc.options[loc.selectedIndex].text;  
if (strUser = 'Other'){ 
    document.getElementById('Comments').disabled = true; 
    document.getElementById('Comments').style.backgroundColor = '#cccccc'; 
    rowCount--; 
    i; 
} 
else { 
    document.getElementById('Comments').disabled = false; 
    rowCount--; 
    i; 
} 
    return true; 
} 
} 
</script> 

답변

0

먼저 첨가하여 선택 박스 자료 :
sel.id = 'LOCsel'+ 반복;

이어서 각 선택 박스 온 클릭 이벤트 핸들러를 추가
을 sel.onclick = 함수() {
onLOCSelected (반복);
};

그런 다음이 함수를 추가
(된 uniqueID) onLOCSelected 기능
{
//
// 따라 주석 입력을 전환 & 선택한 항목의 값을 평가 (당신이 그것을 전화로 반복)을을 UniqueID 사용
}

희망 하시겠습니까?

+0

내가 작성한 기능은 다음과 같습니다. 그러나 여전히 작동하지 않습니다. 함수 onLOCSelected (반복) { var loc = document.getElementById ('LOCsel') [반복]; var strUser = loc.options [loc.selectedIndex] .text; if (strUser = 'Other') { document.getElementById ('Comments') [반복] .disabled = true; } else { document.getElementById ('Comments'). disabled = false; \t} true를 반환합니다. } – tnbumbray

+0

DOM의 요소에는 고유 한 ID가 있으며 해당 ID로 조회해야합니다. 당신은 요소들을 올바르게 찾지 않아야합니다 : document.getElementById ('LOCsel'+ iteration) document.getElementById ('Comments'+ iteration) 당신은 당신이 상당히 새로운 것 같아요. 최선의 조언은 Chrome에서 사이트를 실행하고 개발자 도구를 열고 스크립트 탭 및 콘솔을 사용하여 JS를 디버깅하는 것입니다. 이것은 당신이 배우는 데 도움이 될 것입니다 ... – JoelH

+0

정말 고마워요. 마침내 효과가 있습니다. – tnbumbray

관련 문제