Php 为什么jQuery不返回正确的类元素?

Php 为什么jQuery不返回正确的类元素?,php,jquery,html,Php,Jquery,Html,我试图获取具有特定id的元素的类,如下所示。我将使用多个字段生成两个下拉列表,其中包含“addnew”选项,但是选项的类不同,第一个是“animal\u species”,第二个是“animal\u condition”。当在下拉列表中选择“添加新”时,会弹出一个模式窗口,其中有一个文本字段,用于在下拉列表中输入新选项。这是模态窗口: <!-- add-new field --> <div class="modal small hide fade" id="add-ne

我试图获取具有特定id的元素的类,如下所示。我将使用多个字段生成两个下拉列表,其中包含“addnew”选项,但是选项的类不同,第一个是“animal\u species”,第二个是“animal\u condition”。当在下拉列表中选择“添加新”时,会弹出一个模式窗口,其中有一个文本字段,用于在下拉列表中输入新选项。这是模态窗口:

  <!-- add-new field -->
  <div class="modal small hide fade" id="add-new" tabindex="-1" role="dialog" aria-labelledby="add-new-fieldLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">√ó</button>
        <h3 id="add-new-fieldLabel">Add New Field</h3>
      </div>
      <div class="modal-body">

          <p>Would you like to add a new item?</p>
          <input type="text" id="add-new-text" name="add-new-text" placeholder="Type the new option">

      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-success" id="add-new-submit" name="add-new-submit"/>Add</button>
      </div>
 </div><!-- /add-new field -->

√ó
添加新字段
是否要添加新项目

添加
文本字段的jQuery是

      $('#upload_form option[value="addnew"]').click(function(){

          // Show modal window
          $('#add-new').modal('show');

          $('#add-new-submit').on('click', function(){                

              // Get new option from text field
              var value = $('#add-new-text').val();
              console.log(value);

              // Get the class
              //var Classofentry = $('#upload_form option[class]').attr("class");
              var Classofentry = $('#upload_form option[class]').attr("class");
              console.log(Classofentry);

              $.ajax({
                    type: "POST",
                    url: "<?php echo site_url(); ?>main/change_options",
                    data: {new_option: value, new_option_class: Classofentry},
                    dataType: "html",
                    error: errorHandler,
                    success: success
                  });

              function success(data){

                  //$('#animal_species').append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); // This might work ...
                  $('#'+Classofentry).append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); // This might work ...
                  alert(data);

                  //alert('Success!');

              }

              function errorHandler(){
                  alert('Error with AJAX!');
              }                              

              $('#add-new').modal('toggle');                              
           });

      }); 

  </script>
$('#上传表单选项[value=“addnew”]”)。单击(函数(){
//显示模式窗口
$('添加新').modal('显示');
$(“#添加新提交”)。在('click',function(){
//从文本字段获取新选项
var值=$(“#添加新文本”).val();
console.log(值);
//上课
//var Classofentry=$(“#上传表单选项[class]”)。attr(“class”);
var Classofentry=$(“#上传表单选项[class]”)。attr(“class”);
日志(入口类别);
$.ajax({
类型:“POST”,
url:“主/更改选项”,
数据:{new_option:value,new_option_class:Classofentry},
数据类型:“html”,
错误:errorHandler,
成功:成功
});
功能成功(数据){
//$(“#动物物种”)。追加(“+data+”);//这可能有用。。。
$(“#”+Classofentry.append(“+data+”);//这可能有用。。。
警报(数据);
//警惕(“成功!”);
}
函数errorHandler(){
警报(“AJAX错误!”);
}                              
$(“#添加新”).modal('toggle');
});
}); 
除了我添加了第二个“Animal Condition”元素,模态中输入的文本被放入第一个(“Animal Species”)元素中,因为“Classofentry”始终是“Animal_Species”,而不是生成模态的元素的类之外,它工作得非常好。如何在jQuery中访问该类?或者我需要一个不同的实现来处理多个字段?我尝试了很多东西,但都还没有到位。救命啊

下面是我如何让它工作的(谢谢你的评论!)


$(“#上传表单选项[value=“addnew”]”)。单击(函数(){
//显示模式窗口
$('添加新').modal('显示');
//上课
//var Classofentry=$(“#上传表单选项[class]”)。attr(“class”);
var Classofentry=$(this.attr(“类”);
日志(入口类别);
$(“#添加新提交”)。在('click',function(){
//从文本字段获取新选项
var值=$(“#添加新文本”).val();
console.log(值);
$.ajax({
类型:“POST”,
url:“主/更改选项”,
数据:{new_option:value,new_option_class:Classofentry},
数据类型:“html”,
错误:errorHandler,
成功:成功
});
功能成功(数据){
//$(“#动物物种”)。追加(“+data+”);//这可能有用。。。
$(“#”+Classofentry.append(“+data+”);//这可能有用。。。
警报(数据);
//警惕(“成功!”);
}
函数errorHandler(){
警报(“AJAX错误!”);
}                              
$(“#添加新”).modal('toggle');
});
}); 

我将$(this)元素向上移动以访问所选选项。

$(“#upload_form option[class]”)。attr(“class”)
将始终获取第一个匹配元素的类,它没有当前元素的概念。您应该基于当前元素
或所选选项
:所选
此行选择元素:“var Classofentry=$(“#upload_form option[class]”)。attr(“class”);“选择所有选项。您必须告诉jquery您要找的类。如果它们没有重复,请使用id。请不要包含您的PHP-这是一个客户端问题。谢谢Kevin B和aldux!我使用上面包含的$(this)修复了它。谢谢你的帮助!我是Stackoverflow的新手,所以请让我知道如何在这个论坛上恰当地表达我的感激之情:-)
  <script type="text/javascript">

      $('#upload_form option[value="addnew"]').click(function(){

          // Show modal window
          $('#add-new').modal('show');

          // Get the class
          //var Classofentry = $('#upload_form option[class]').attr("class");
          var Classofentry = $(this).attr("class");
          console.log(Classofentry);

          $('#add-new-submit').on('click', function(){                

              // Get new option from text field
              var value = $('#add-new-text').val();
              console.log(value);

              $.ajax({
                    type: "POST",
                    url: "<?php echo site_url(); ?>main/change_options",
                    data: {new_option: value, new_option_class: Classofentry},
                    dataType: "html",
                    error: errorHandler,
                    success: success
                  });

              function success(data){

                  //$('#animal_species').append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); // This might work ...
                  $('#'+Classofentry).append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); // This might work ...
                  alert(data);

                  //alert('Success!');

              }

              function errorHandler(){
                  alert('Error with AJAX!');
              }                              

              $('#add-new').modal('toggle');                              
           });

      }); 

  </script>