动态菜单的 Ajax 调用适用于第一个 <select> 元素，但不适用于其他元素答案

【问题标题】：Ajax call for dynamic menu works for first <select> element, but not additional ones动态菜单的 Ajax 调用适用于第一个 <select> 元素，但不适用于其他元素
【发布时间】：2013-05-11 17:36:45
【问题描述】：

我正在尝试使用 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();
}
?>

【问题讨论】：

标签： php javascript jquery mysql ajax

【解决方案1】：

使用

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

因为您要添加 counter，它默认设置为一个，所以我认为它甚至不适用于第一个选择框。

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

【讨论】：