select 박스 값 선택시 추가 입력창 생성
본문
안녕하세요...제가 append를 사용해서 select 박스의 옵션을 추가하고 있는데 여기에서 select 박스의 값이 바꼈을 때 추가 입력창이 나올 수 있도록 화면을 구현했어요!!
그런데 맨처음에 select 박스에서는 값이 바꼈을 때 입력창이 나오는데 append로 추가한 부분에서는 값을 받지 못해서 어떻게 해결하면 좋을지 여쭤봅니다!
<script>
let aryMethodNames = new Array();
</script>
<div class="write_div">
<div class="grid_container">
<div class="grid_box">
<div>
<label for="ADMINISTRATION_METHOD" style="margin-left:20px;">관련투여방법</label>
<?php
$sql = "SELECT DISTINCT METHOD_TO_ADMINISTER FROM ADMINISTRATION_METHOD ";
$result = sql_query($sql);
$METHOD_TO_ADMINISTER=array();
while($row=sql_fetch_array($result)){
$METHOD_TO_ADMINISTER[]=$row['METHOD_TO_ADMINISTER'];
}?>
<select id="ADMINISTRATION_METHOD0" class="ADMINISTRATION_METHOD" name="wr_12" style="margin-left:20px;" >
<option value="">선택하세요</option>
<?php for($x=0; $x<sizeof($METHOD_TO_ADMINISTER); $x++){?>
<option value="<?php echo $METHOD_TO_ADMINISTER[$x]?>" <?php echo ($write['wr_12'] == $METHOD_TO_ADMINISTER) ? " selected" : "";?>><?php echo $METHOD_TO_ADMINISTER[$x]?></option>
<script>
aryMethodNames.push("<?php echo $METHOD_TO_ADMINISTER[$x] ?>")
</script>
<?php }?>
<script>
$('#ADMINISTRATION_METHOD0').val('<?=$write['wr_12']?>');
</script>
</select>
</div>
<div id="addMethodBox0" ></div>
</div>
<div>
<div>
<input type="button" id="typeButton" onclick="addBox(this)" class="frm_input" name ="addBtn" value="추가하기" style="display:inline-block; float:right; margin-right:140px; margin-top:10px;">
</div>
</div>
</div>
</div>
<div class="btn_confirm write_div" style="margin-right:135px;">
<a href="<?php echo get_pretty_url($bo_table); ?>" class="btn_cancel btn">취소</a>
<button type="submit" id="btn_submit" accesskey="s" class="btn_submit btn">작성완료</button>
</div>
</form>
<script>
let cnt = 0;
function addBox(e){
if($('#ADMINISTRATION_METHOD'+cnt+'')[0].value){
cnt ++
$('.grid_box_fourth'+cnt+'').append (
'<label for="ADMINISTRATION_METHOD" style="margin-left:25px;">관련투여방법</label><select id="ADMINISTRATION_METHOD'+cnt+'" class="ADMINISTRATION_METHOD123" name="METHOD_TO_ADMINISTER" style="margin-left:25px;"> <option value="">선택하세요</option> </select>'
);
for(let j = 0; j<aryMethodNames.length ; j++) {
$('#ADMINISTRATION_METHOD'+cnt+'').append (
'<option value="'+aryMethodNames[j]+'">'+aryMethodNames[j]+'</option>'
);
console.log(j, aryMethodNames)
}
$('.grid_box_fourth'+cnt+'').append (
'<input style="width:60px; font-size:1.25em; border-radius:5px; text-align:center; margin-left:5px;" class="btnRemove" type="button" value="remove">'
);
$('.grid_box_fourth'+cnt+'').append (
'<div id="addMethodBox'+cnt+'" ></div>'
); // end append
$('.btnRemove').on('click', function () {
$(this).parent().remove ();
});
}
}
document.querySelector('.ADMINISTRATION_METHOD').addEventListener('change', function(){
console.log("여기 어디쯤",$(this).val())
$.ajax({
url : " http://localhost/bbs/dataloader/data_fish_drug.php",
type : "post",
data : {
cnt : cnt,
type : $(this).val()
},
success : function(res) {
$('#addMethodBox'+cnt+'').html(res)
console.log("선택된 옵션",res)
},
error : function(err){
alert(err)
}
});
})
</script>
추가로 제가 생각하기에는 append쪽에서 option부분을 변수로 받아오면 되지 않을까해서
php에서는 $i .= 'WHERE 1=1' 이런식으로 사용하잖아요 !! 자바스크립트에는 이런 방식은 사용하지 않는 걸까요?? 아무리 찾아봐도 보이지 않아서요
답변을 작성하시기 전에 로그인 해주세요.