채택완료

select 박스 값 선택시 추가 입력창 생성

2021-12-23 (목) 14:24:46 2,021

안녕하세요...제가 append를 사용해서 select 박스의 옵션을 추가하고 있는데 여기에서 select 박스의 값이 바꼈을 때 추가 입력창이 나올 수 있도록 화면을 구현했어요!!

그런데 맨처음에 select 박스에서는 값이 바꼈을 때 입력창이 나오는데 append로 추가한 부분에서는 값을 받지 못해서 어떻게 해결하면 좋을지 여쭤봅니다!

Copy
<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' 이런식으로 사용하잖아요 !! 자바스크립트에는 이런 방식은 사용하지 않는 걸까요?? 아무리 찾아봐도 보이지 않아서요

|

답변 1개

채택된 답변
+20 포인트
2021-12-23 (목) 19:06:30

왜 저렇게 짜는지 이해가.. 제이쿼리 쓰실거면 제이쿼리만쓰시고 바닐라로 쓸거면 바닐라 방식으로 쓰셔요 

답변을 작성하려면 로그인이 필요합니다.