javascript - 如何使用jquery从附加的html中获取选择内的选项文本？

Question

我正在使用表单并附加带有选项的选择，这些选项是值和文本来自 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 代码分离到 View 文件中并通过 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 正常，这应该可以工作。就像我说的，自己调试和尝试太难了。

此外，使用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.

 });