如何使用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和Javascript和HTML :)（对于调试和可读性不好）。 将您的php代码分离到一个视图文件中，并通过ajax获得它。

我发现的几件事（请记住，您提供的代码无法尝试（因为其中包含php）：

1. 我没有看到单击事件的右括号。 如果有，请确保在change事件之前关闭它。

2. 利用“ this”上下文，这就是为什么您在javascript中使用“ this”的原因。 例如：

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

只要选择器"#select_program-"+x-1是好的， "#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.

 });