Я создаю приложение, которое будет искать db, а затем позволит пользователю сравнивать результаты. Для этого мне нужно несколько надежных выпадающих меню. Я не эксперт-кодер, имею некоторые знания HTML и PHP. Для этого я должен использовать Javascript.JavaScript onchange не работает над выпадающим элементом
Теперь, если я пытаюсь использовать тот же скрипт с другой информацией, которая создаст dropdown3, это не сработает.
Вот код индекса страницы:
<?php
require('assets/classes/manufacturer.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="style/style.css" rel="stylesheet" type="text/css">
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<div id="dropdown1">
<select name="proizvodac" id="proizvodac-select">
<option value="">Odaberi Proizvođača</option>
<?php foreach($proizvodaci as $proizvodac): ?>
<option value="<?php echo $proizvodac['id']; ?>"><?php echo $proizvodac['proizvodac']; ?></option>
<?php endforeach; ?>
</select>
</div>
<div id="dropdown2">
</div>
<div id="dropdown3">
</div>
</div>
<div id="grupe">
<div id="grupa1">
</div>
<div id="grupa2">
</div>
<div id="grupa3">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/global.js"></script>
</body>
</html>
И сценарий здесь:
$('#proizvodac-select').on('change', function() {
var self = $(this);
$.ajax({
url: 'http://localhost/assets/classes/model.php',
data: { proizvodac: self.val()},
success: function(data){
$('#dropdown2').html(data);
}
});
});
Это должно вызвать model.php, когда выбор сделан в первом раскрывающемся списке, первый выпадающий создаются от производителя .php, который требуется при запуске.
model.php:
<?php
require('database.php');
if(isset($_GET['proizvodac'])) {
$modelQuery = "SELECT
*
FROM auti
WHERE proizvodac_id = :proizvodac_id
";
$modeli = $db->prepare($modelQuery);
$modeli->execute(['proizvodac_id' => $_GET['proizvodac']]);
$selectedModel = $modeli->fetch(PDO::FETCH_ASSOC);
}
?>
<select name="model" id="model-select">
<option value="">Odaberi Model</option>
<?php foreach($modeli as $model): ?>
<option value="<?php echo $model['id']; ?>"><?php echo $model['model']; ?></option>
<?php endforeach; ?>
</select>
Примечание: я, вероятно, сделал что-то неправильно, когда я пытался создать третий выпадающий список, который зависит от второго.
EDIT: Я сделал что-то не так, спасибо kingkero за то, что нашел.
Так что мне нужно сейчас, если вы можете сказать мне, как получить третье выпадающее меню и так далее. Мне нужно, как 10 из них. Все должно зависеть от предыдущего.
И если вы заметили неправильную практику в моем коде, сообщите мне.
Теперь у меня есть сценарий для третьего выпадающего списка, и он работает, если вы запускаете консоль в хроме, но не можете заставить ее работать самостоятельно.
SCRIPT ЗДЕСЬ:
$('#model-select').on('change', function() {
var self = $(this);
$.ajax({
url: 'http://localhost/assets/classes/opcija_modela.php',
data: { model: self.val()},
success: function(data){
$('#dropdown3').html(data);
}
});
});
Спасибо заранее
Вы записываете '# dropdown2-value', но этот идентификатор не существует нигде. Чтобы узнать, работает ли сам AJAX, откройте консоль разработчика и перейдите в сеть. Затем измените значение, и вы должны увидеть запрос + всю его информацию (например, данные ответа и успех/сбой) – kero
Спасибо @kingkero, первая проблема решена, не могу поверить, что я ее пропустил. Теперь у меня есть другая проблема, отредактированный пост. – Damodar