动态菜单的Ajax调用适用于第一个< select>元素，但没有其他元素 [英] Ajax call for dynamic menu works for first <select> element, but not additional ones

问题描述

我正在尝试使用jquery创建一个动态菜单，我想用Ajax数据(从数据库中获取)填充后续菜单.

i'm trying to create a dynamic menu with jquery, and I want to populate the subsequent menu with Ajax data (taken from a DB).

然后，我希望能够添加其他下拉菜单并保留相同的功能.我有它为单个下拉列表工作和ajax调用正在工作，但它不适用于通过jquery(Repeat)函数添加的其他下拉列表.

I then want to be able to add additional dropdowns and retain the same functionality. I have it working for a single drop down and the ajax call is working, but it wont work for additional dropdowns that are addded via jquery (Repeat) function.

我认为在处理jquery中的增量时，我不需要在PHP中添加一个计数器变量，但是我只是无法从其他下拉列表(进入(.additionalsubj')的下拉列表)中获取输入.进入Ajax-我什至无法让它们显示在Firebug中. 我有点卡住-任何想法都将不胜感激.

I dont think that I need to add a counter variable to the php as I'm handling the incrementation in the jquery, but I just cant get the input from the additional dropdowns (the ones that go into (.additionalsubj') into the Ajax - i cant even get them to show in Firebug. I'm a bit stuck - any thoughts would be massively appreciated.

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从数据库中获取数据:

and the PHP getting the data from the database:

<?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(){

因为要添加的counter默认情况下设置为1，所以我不认为它甚至对于第一次选择框也有效.

because you are adding counter which is set to one by default so i don't think its even work for first select box.

因此，在code上使用将对所有id以subject开头的selects工作.

So use above code that will work for all selects whose id starts with subject.

这篇关于动态菜单的Ajax调用适用于第一个< select>元素，但没有其他元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！