Question

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

Answer 1

使用

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

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

因此，请使用code以上selects，该id适用于subject以{{1}}开头的所有{{1}}。

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

1 个答案: