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