JavaScript onchange无法在下拉元素上使用

Question

I am creating an application that will search db and later on allow user to compare results. 我正在创建一个将搜索数据库的应用程序，以后允许用户比较结果。 For that i need multiple dependable drop down menus. 为此，我需要多个可靠的下拉菜单。 I am not expert coder, have some knowledge of HTML and PHP. 我不是专家编码人员，对HTML和PHP有所了解。 For this i have to use Javascript. 为此，我必须使用Javascript。

Now if i try to use same script with diferent information that will create dropdown3, it does not work. 现在，如果我尝试将相同的脚本与将创建dropdown3的不同信息一起使用，它将无法正常工作。

Here is code of index page: 这是索引页的代码：

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

And script is here: 脚本在这里：

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

This should call model.php when selection is made in first dropdown, first dropdown is created from manufacturer.php that is required on start. 在第一个下拉菜单中进行选择时，应调用model.php，第一个下拉菜单是从启动时需要的Manufacturer.php创建的。

model.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>

NOTE: I have probably did something wrong when i was trying to create third dropdown that depends on second one. 注意：当我尝试创建依赖于第二个下拉菜单的第三个下拉菜单时，我可能做错了什么。

EDIT: I have did something wrong, thanks kingkero for finding it. 编辑：我做错了什么，感谢kingkero的发现。

So what i need now, if you can tell me how to get third dropdown menu and so on. 所以，如果您能告诉我如何获取第三个下拉菜单，等等，我现在需要的是什么。 I need like 10 of them. 我需要其中的10个。 All should depend on previous one. 一切都应取决于前一个。
And if you notice some bad practice in my code, please let me know. 如果您发现我的代码中有一些不好的做法，请告诉我。

Now i got script for third dropdown and it is working if run from console in chrome but can't get it to work by itself. 现在我有了第三个下拉菜单的脚本，如果从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);
        }
    });
});

Thank you in advance 先感谢您

Answer 1

Your Script file should be include with in the head tag 您的脚本文件应包含在head标签中

Ex: 例如：

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

JavaScript onchange无法在下拉元素上使用

问题描述

1 个解决方案

解决方案1
0 2015-03-24 09:39:16

JavaScript onchange无法在下拉元素上使用

问题描述

1 个解决方案

解决方案1 0 2015-03-24 09:39:16

解决方案1
0 2015-03-24 09:39:16