Question

我正在研究PHP。我有三个动态下拉框。在第一个选择值的基础上，我改变第二个选择框的内容和第三个选择框的相同情况。我通过javascript实现了这个功能。我遇到的问题是我的代码在localhost上完美运行但是当我在在线服务器上传代码时页面继续重新加载。让我先分享我的代码，以便您可以了解我在说什么

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事件和fire reload（）函数

Answer 2

首先放弃内联onchange =＆＃34;＆＃34;选择标签内的事件..

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

这是我的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

PHP - Onchange重新加载页面，其值为select

2 个答案: