Я пытаюсь создать динамическое меню с jquery, и я хочу заполнить последующее меню данными Ajax (взятыми из БД).
Затем я хочу иметь возможность добавлять дополнительные выпадающие списки и сохранять ту же функциональность. Я работаю с ним на один снимок и работает вызов ajax, но он не работает для дополнительных выпадающих списков, которые добавляются через функцию jquery (Repeat).
Я не думаю, что мне нужно добавить переменную счетчика в 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 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(); } ?>