JavaScript onchange不在dropdown元素上工作

时间:2015-03-15 19:38:21

标签: javascript php jquery ajax

我正在创建一个搜索db的应用程序,稍后允许用户比较结果。为此,我需要多个可靠的下拉菜单。我不是专家编码员,对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中的控制台运行它可以正常工作,但无法单独工作。

SCRIPT HERE:

$('#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);
        }
    });
});

提前谢谢

1 个答案:

答案 0 :(得分:0)

您的脚本文件应包含在头标记

例如:

<?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>