动态菜单的Ajax调用适用于first <select>元素，而不是附加元素

Ajax call for dynamic menu works for first <select> element, but not additional ones

本文关键字：元素 菜单 select 适用于 调用 first 动态 Ajax      更新时间：2023-09-26

我试图用jquery创建一个动态菜单，我想用Ajax数据填充随后的菜单(从数据库中获取)。

然后我希望能够添加额外的下拉菜单并保留相同的功能。我有它的工作为一个单一的下拉和ajax调用是工作的，但它不会通过jquery(重复)函数添加的额外的下拉。

我不认为我需要添加一个计数器变量到php，因为我正在处理jquery的增量，但我只是不能从额外的下拉框(进入(.additionalsubj')到Ajax的输入-我甚至不能让他们在Firebug中显示。我有点卡住了-任何想法都会非常感激。

HTML: 

        <h3>Primary  Subject</h3>
    <div class="subjselect"> 
    <div class="select">
    <select id="subject">
    <option value="">Subject</option>
    <option value="math">Math</option>
    <option value="science">Science</option>
    <option value="languages">Languages</option>
    <option value="humanities">Humanities</option>
    <option value="econ">Economics/Finance</option>
    <option value="gmat">GMAT</option>
    <option value="sat">SAT</option>
    </select>
    <select id="topic">
    <option value="">Topic</option>
    <option value="math">Math</option>
    <option value="science">Science</option>
    <option value="languages">Languages</option>
    <option value="humanities">Humanities</option>
    <option value="econ">Economics/Finance</option>
    <option value="gmat">GMAT</option>
    <option value="sat">SAT</option>
    </select>
    </div>
            <a href="#" id="another" onclick="Repeat(this)"></br>Add Another Subject</a>
</div>
Jquery: 

var counter=1;
$(document).on('change', 'select#subject'+counter+'', function(){
 var subject = $("select#subject"+counter+">option:selected").text();
 var selector=$("select#subject"+counter+"");
 console.log(selector);
 console.log(subject);
  $.ajax({
  type: 'GET',
  url: 'tutorprofileinput.php',
  data: {"subject": subject},
  dataType:'json',
success:function(data){
 console.log(data);
 var options = [];    
 $.each(data, function (key, val) {
        options += '<option value="' + val.topic + '">' + val.topic + '</option>';
        console.log(options);  
       });       
        $("select#topic").html(options);
  },
  error:function(){
    // failed request; give feedback to user
    $('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
  }
});
});
function Repeat(obj){
counter++;
console.log(counter);
var selecoptions = '<div class="select"><select id="subject'+counter+'"><option value="">Subject</option><option value="math">Math</option><option value="science">Science</option><option value="languages">Languages</option><option value="humanities">Humanities</option><option value="econ">Economics/Finance</option><option value="gmat">GMAT</option><option value="sat">SAT</option></select></div><div class="select"><select id="topic'+counter+'"><option value="">Topic</option></select></div>';
$('.additionalsubj').append(selecoptions);
console.log($('.additionalsubj'));
}

和PHP从数据库获取数据:

<?php
include("php_includes/db_conx.php");
if (isset($_GET['subject'])){
$subject = $_GET['subject'];
$query = ("SELECT subject.id, topic FROM topics, subject WHERE subject='$subject' AND subject.id=topics.subjID ORDER BY subject");
$result = mysqli_query($db_conx, $query);
$rows = array();
while($r = mysqli_fetch_array($result, MYSQLI_ASSOC)){
$rows[] = $r;
}
    echo json_encode($rows);
    exit();
}
?>

使用

$(document).on('change','select[id^=subject]',function(){

因为你添加了默认设置为1的counter，所以我认为它甚至不能用于第一个选择框。

因此，使用以上code，将适用于所有id以subject开头的selects。

相关文章：