jquery를 사용하여 추가 된 HTML에서 select의 텍스트를 가져 오는 방법은 무엇입니까?

Question

저는 폼을 사용하고 값을 가진 select 옵션을 추가하고 텍스트는 여러개의 PHP에서옵니다. 내 문제는 선택한 옵션의 텍스트를 가져올 수 없다는 것입니다. 내가 추가 된 HTML에서 텍스트를 먼저 얻을 수 누군가가 나를 도울 수 있습니까?

JS : 여기

$(document).ready(function(){ 
     fetch_ssi_request(); 
     var wrapper = $(".input_fields_wrap"); //Fields wrapper 
     var x = 1; 

     $("#add_row").click(function (e) { 
     e.preventDefault(); 
     var form = '<div class="row row-'+x+'" style="margin-bottom:10px">'+'<div class="col-md-5">'+'<select class="form-control" name="program[]" id="select_program-'+x+'" required>' 
         +'<option value="">-- Please select a program -- </option>'; 
         <?php foreach($programs as $key){ ?> 
         var val = "<?php echo $key->program ?>"; 
         var name = "<?php echo $key->title ?>"; 
         form+='<option value="'+val+'">'+name+'</option>'; 
         <?php } ?> 
         form+='</select></div>'; 
         form+='<div class="col-md-5">'+'<select class="form-control" name="accreditation[]" id="select_level-'+x+'" required>' 
         +'<option value="">-- Please select an accreditation level -- </option>'; 
         <?php foreach($accreditation as $key){ ?> 
         var lvl_val = "<?php echo $key->accred_id ?>"; 
         var lvl_name = "<?php echo $key->accred_title ?>"; 
         form+='<option value="'+lvl_val+'">'+lvl_name+'</option>'; 
         <?php } ?> 
         form+='</select></div><div class="col-md-2">'; 
          $('.form_ssi').append(form+'<button class="btn btn-danger" div-id="'+x+'" id="delete_row"><span class="fa fa-minus"></span></button></div></div>'); 
          x++; 
      console.log(x); 


      $(document).on("change", "#select_program-"+x-1, function() { 
      //Here is the problem empty is the output of the console log         
      console.log($("#select_program-"+x-1).find(":selected").text()); 
      $("#select_level-"+(x-1)+" option[value='2']").remove(); 

      });            
}); 

는 HTML 코드를 HTML한다 : 여기 내 코드는

<div class="row" style="margin-bottom:10px"> 

        <div class="col-md-5"> 
          <select class="form-control" name="program[]" id="select_program-0" required> 
           <option value="">-- Please select a SSI/Guideline -- </option> 
           <?php foreach($programs as $key){ ?> 
           <option value="<?php echo $key->program?>"><?php echo $key->title?></option> 
           <?php } ?> 
          </select> 
        </div> 
        <div class="col-md-5"> 
         <select class="form-control" name="accreditation[]"id="select_level-0" required> 
          <option value="">-- Please select an accreditation level/guideline -- </option> 
          <?php foreach($accreditation as $key){ ?> 
          <option value="<?php echo $key->accred_id?>"><?php echo $key->accred_title?></option> 
          <?php } ?> 
         </select> 
        </div><!--.col-md-5--> 
        <div class="col-md-2"> 
         <button class="btn btn-danger" id="delete_row"><span class="fa fa-minus"></span></button> 
        </div> 
       </div><!--.row--> 
      </div> 
      <div class="row"> 
       <div class="col-md-12"> 
        <button class="btn btn-success" id="add_row"><span class="fa fa-plus"></span> Add More</button></br> 
       </div> 
      </div> 

Answer 1

우선 첫째, 이것은 당신이 PHP와 자바 스크립트와 HTML을 혼합하지해야하는 이유입니다 :) (디버깅 및 가독성에 좋지 않음). PHP 코드를 뷰 파일로 분리하고 ajax를 통해 가져옵니다. 내가 당신을 위해 닫는 괄호를 보지 못했다

1. :

   몇 가지 나는 당신이 그 안에 PHP)를 가지고 (사용자가 제공 한 코드가 그것을 밖으로 시도하는 것은 불가능 것을 명심하시기 바랍니다 (파악 .. 당신이 경우에, 당신의 change 이벤트 전에 종료 확인 '이'컨텍스트의

2. 만들기 사용을 이벤트를 클릭하고 '이'자바 스크립트 이유입니다 예 :.

   $(document).on("change", "#select_program-"+x-1, function() { 
       //Here is the problem empty is the output of the console log         
       console.log($(this).val()); 
   });   
   

,536,

선택자 "#select_program-"+x-1이 좋은 한 계속 작동해야합니다. 내가 디버그하고 직접 시도해 보았다.

또한 class을 사용하면 id을 고유하지 않도록 신경 쓸 필요가 없습니다. 코멘트 후

<select class="form-control" name="program[]" class="select_program" required> 

$(document).on("change", ".select_program", function() { 
     //Here is the problem empty is the output of the console log         
     console.log($(this).val()); 
}); 

업데이트,

이제 (가 선택한 옵션에 따라 가정) 옵션을 제거해야합니다. 자, 인증 요소가있는 곳에서부터 시작하겠습니다. 그것은 항상 당신이 현재있는 select 요소 옆에있을 것입니다 (html을 변경하지 않는 한). 따라서 다음을 사용하십시오 :

$(document).on("change", ".select_program", function() { 
    console.log($(this).val()); 
    //add your condition here 
    //fine the accreditation select. 
    $(this).closest('div') 
      .next() 
      .find('select.select_level') 
      .remove('whatever you like') 
    // $(this) is the current select box, 
    // .closest(div) finds the closest parent div which is <div class="col-md-5"> 
    // next() goes to siblings of that div which is <div class="col-md-5"> 
    // find(.select_level) finds the select box inside it with class select_level. Make sure to change the id to class 
    // do what ever you need to do. I used `remove()` you can use anything you want here. 

});