[英]JavaScript onchange not working on dropdown element
我正在創建一個將搜索數據庫的應用程序,以后允許用戶比較結果。 為此,我需要多個可靠的下拉菜單。 我不是專家編碼人員,對HTML和PHP有所了解。 為此,我必須使用Javascript。
現在,如果我嘗試將相同的腳本與將創建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,第一個下拉菜單是從啟動時需要的Manufacturer.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>
注意:當我嘗試創建依賴於第二個下拉菜單的第三個下拉菜單時,我可能做錯了什么。
編輯:我做錯了什么,感謝kingkero的發現。
所以,如果您能告訴我如何獲取第三個下拉菜單,等等,我現在需要的是什么。 我需要其中的10個。 一切都應取決於前一個。
如果您發現我的代碼中有一些不好的做法,請告訴我。
現在我有了第三個下拉菜單的腳本,如果從chrome控制台運行,它可以正常工作,但無法使其單獨工作。
腳本在這里:
$('#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);
}
});
});
先感謝您
您的腳本文件應包含在head標簽中
例如:
<?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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="js/global.js"></script> </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> </body> </html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.