PHP - 具有选择值的 Onchange 重新加载页面

Question

我正在研究 PHP。我有三个动态下拉框。在第一个选择值的基础上，我更改了第二个选择框的内容，第三个选择框的内容相同。我已经通过 javascript 实现了这个功能。我遇到的问题是我的代码在本地主机上运行良好，但是当我在在线服务器上上传代码时，页面会不断重新加载。让我先分享我的代码，以便您了解我在说什么

javascript

<script>
    var valnew = <?php echo $cat3; ?> ;

    function reload() {

        var val = form.cat.options[form.cat.options.selectedIndex].value;
        var text = form.cat.options[form.cat.options.selectedIndex].text;
        self.location = 'douglas-college.php?cat=' + val + '&text=' + text
    }

    function reload3(form) {
        var val = form.cat.options[form.cat.options.selectedIndex].value;
        val2 = form.subcat.options[form.subcat.options.selectedIndex].value;
        self.location = 'douglas-college.php?cat=' + val + '&cat3=' + val2;
    }

    function reload4(form) {
        var val3 = form.subcat3.options[form.subcat3.options.selectedIndex].value;
        var text = form.subcat3.options[form.subcat3.options.selectedIndex].text;
        self.location = 'course-title.php?inst_id=' + val3 + '&coursecode=' + valnew;
    }
</script>





 <?php
$query1 = mysql_query("SELECT * FROM course");
echo "<select name='cat' class='input-large form-control' onchange=\"reload(this.form)\">";
if (!isset($_GET['cat'])) {
    echo '<option>Select one</option>';
    while ($row = mysql_fetch_array($query1)) {
        echo '<option value="' . $row['courseID'] . '">' . $row['courseName'] . '</option>';
    }
} else {
    while ($row = mysql_fetch_array($query1)) {
        echo '<option value="' . $row['courseID'] . '">' . $row['courseName'] . '</option>';
    }
}
echo "</select>";
?>

我现在只添加了一个选择框 php 代码。我可以根据要求分享整个代码。我只使用一个下拉菜单检查了该页面，但页面仍在不断刷新。表示页面一直在不断地重新加载

Answer 1

真正的问题在于： http://smithdeveloper.com/test/js/sitefunction.js

$('select').change(function() {
    $('option').css('background', 'white');
    $('option:selected').css('background', '#ff87c3');
}).change();

U 在所有选择元素上触发 .change()。 这就是为什么在页面加载后立即调用 onchange 事件。 所以每次页面加载时，你都会调用 change 事件并监听 change 事件并触发 reload() 函数

Answer 2

首先放弃选择标签内的内联 onchange="" 事件..

比从文件开头删除您的脚本并将其保存在您包含在页面末尾的文件中，sitefunction.js 在 document.ready 挂钩中。

这是我的 jsfiddle，我稍微改变了你的功能..

$('[name=cat]').on('change', function(){
    var val1 = form.cat.options[form.cat.options.selectedIndex].value;
    var txt1 = form.cat.options[form.cat.options.selectedIndex].text;
    self.location = 'http://smithdeveloper.com/test/douglas-college.php?cat=' + val1 + '&text=' + txt1
});

$('[name=subcat]').on('change', function(form) {
    var val2 = form.cat.options[form.cat.options.selectedIndex].value;
    var txt3= form.subcat.options[form.subcat.options.selectedIndex].value;
    self.location = 'http://smithdeveloper.com/test/douglas-college.php?cat=' + val2 + '&cat3=' + txt3;
});

$('[name=subcat3]').on('change', function(form) {
    var val3 = form.subcat3.options[form.subcat3.options.selectedIndex].value;
    var text = form.subcat3.options[form.subcat3.options.selectedIndex].text;
    self.location = 'course-title.php?inst_id=' + val3 + '&coursecode=' + valnew;
});

http://jsfiddle.net/mkdizajn/wLz2g3sw/

hth，干杯，k