동일한 구조화 된 테이블에서 선택 옵션의 값 가져 오기

Question

HTML 페이지에서 테이블/테이블을 동적으로 생성합니다. 하나 이상의 테이블이있을 수 있습니다. 숫자는 다양합니다. 테이블에는 단 하나의 행이 있으며 테이블 구조는 동일한 테이블 구조입니다. 내 테이블 행에는 선택 옵션과 버튼이 있습니다. 내가 여기서하고있는 일은 select 옵션 값을 변경하고 버튼을 사용하여 데이터베이스를 업데이트하는 것이다. 이를 위해 선택 옵션에서 선택하고 해당 값을 숨겨진 입력 필드에 저장합니다. 나중에 모든 입력 된 데이터를 가져오고 DB를 업데이트합니다. 예를 들어, 두 개의 테이블이있는 경우 선택 옵션에 두 개의 ID가 있어야합니다. 그렇게하기 위해 루프 내 에서 루프에 대한 준비가 완료되었습니다. 하지만 그건 효과가 없었습니다. 그 말은 내가 그 가치에 접근 할 수 없다는 것을 의미한다. 그러나 동일한 문서에서 두 개의 ID를 하드 코딩하면 준비가 완료됩니다.

TBODY ...

echo "<form id='form' name='form'>"; 
          echo "<tbody class='tbl_tbody'>"; 
          echo "<tr>"; 
           echo "<td style='width: 115px;'><b>".trim($row_sub_res['statDate'])."</b></td>"; 
           echo "<td style='width: 115px;'><b>".trim($row_sub_res['tarDate'])."</b></td>"; 

           echo "<td>"; 

           echo "<label class='w3-text-red'><b>".trim($row_sub_res['status_name'])."</b></label><br>"; 
           echo "<input name='oldSubStat' type ='hidden' id='selected_stat' value=".trim($row_sub_res['status']).">"; //first input 0 
           echo "<input name='newSubStat' type ='hidden' id='selected_stat_new_id' class='selected_statx$countx'>"; 

           echo "<select id='select_my_id$countx' class='select_my_class$countx' >"; 
           echo "<option disabled selected>Change Status</option>"; 
           echo "<option id='1' value='1'>Pending</option>"; 
           echo "<option id='3' value='3'>Complete</option>"; 
           echo "<option id='4' value='4'>On Hold</option>"; 
           echo "</select>"; 

           echo "</td>"; 

           //echo "<td>".trim($row_sub_res['tarDate'])."</td>"; 
           echo "<td><b><input type='text' id='targetDatepickerID$countx' class='datepickerClass' disabled='disabled' placeholder='yyyy-mm-dd' name='tdate' value=".trim($row_sub_res['tarDate'])."></b></td>"; 

           echo "<td> <input type='submit' id='sub_row_update_id$countx' class='sub_row_update' value='Update'/> </td>"; 
          echo "</tr>"; 
          echo "</tbody>"; 
         echo "</form>"; 

나는 테이블을 반복하고있다. countx가 증가하고 있습니다. 열심히 이런 식으로 코딩 된 나는 두 개의 테이블이있는 경우, 모든 것이 잘 작동

...

$(".select_my_class0").change(function() { 
    var idx = $(this).children(":selected").attr("id"); 
    $(".selected_statx0").val(""); 
    $(".selected_statx0").val(idx); 
    console.log("idx " + idx); 
}); 

    $(".select_my_class1").change(function() { 
    var idx = $(this).children(":selected").attr("id"); 
    $(".selected_statx1").val(""); 
    $(".selected_statx1").val(idx); 
    console.log("idx " + idx); 
}); 

하지만 루프이 경우

. 그것은 작동하지 않습니다 ....

for (var j = 0; j < 2; j++) { 
    console.log("idx " + j); 
    $(".select_my_class"+j).change(function() { 
    var idx = $(this).children(":selected").attr("id"); 
    $(".selected_statx"+j).val("test"); 
    $(".selected_statx"+j).val(idx); 

    }); 
} 

나는 ID와 클래스를 모두 사용했지만, 루핑 모두 작동하지.

내 버튼을 클릭 이벤트 ...

for (var i = 0; i < 3; i++) { 

    $("#sub_row_update_id"+i).click(function(e) { 

    var $subitem; 
    e.preventDefault(); 
    $subitem = $(this).closest("tr") // Finds the closest row <tr> 
        .find("input").each(function() { 

    }); 

     var xxx2 = $subitem[0]["value"]; //old status 
     var yyy2 = $subitem[1]["value"]; //new status 
     var zzz2 = $subitem[2]["value"]; //new tar date 

     console.log(xxx2); 
     console.log(yyy2); 
     console.log(zzz2); 

    }); 

    } 

Answer 1

당신은 당신은 선택과 시작을 사용하여 루프를 가지고 있겠지.

Answer 2

두 가지 방법으로 이벤트 리스너를 첨부 할 수 있습니다. 다음은 ID가있는 JSfiffle에서 작동하는 데모입니다. 그래서 당신은 아마도 당신이 올린 것 이외의 다른 오류의 원인을 찾아야 만합니다. 요소를 올바르게 타겟팅하고 있습니까?

https://jsfiddle.net/wj8aygsy/

$("#select_my_id0").change(function() { 
    var idx = $(this).children(":selected").attr("id"); 
    $(".selected_statx0").val(""); 
    $(".selected_statx0").val(idx); 
    console.log("separate " + idx); 
}); 

    $("#select_my_id1").change(function() { 
    var idx = $(this).children(":selected").attr("id"); 
    $(".selected_statx1").val(""); 
    $(".selected_statx1").val(idx); 
    console.log("separate " + idx); 
}); 


for (var j = 0; j < 2; j++) { 
    console.log("idx " + j); 
    $("#select_my_id"+j).change(function() { 
    var idx = $(this).children(":selected").attr("id"); 
    $(".selected_statx"+j).val("test"); 
    $(".selected_statx"+j).val(idx); 
    console.log("loop " + idx); 
    }); 
}