Question

我试过这段代码，可以显示所选值并刷新页面。

这是HTML

<select name="selectperiode" style="width:200px;" class="chzn-select" data-placeholder="Report Periode">
    <option value=""></option>
    <option value="1">Yearly</option>
    <option value="4">Quarterly</option>
</select>

这就是JQuery：

<script>
$(function(){
    $("[name=selectperiode]").change(function(){
        var val = $(this).val();
        var stat;
        if (typeof val !== 'undefined') {
            stat = val;
        }
        else {
            stat = '';
        }
        window.location.href = './corpreport.php?per='+stat;
        return true;
    });
});
</script>

工作正常。所以我添加了一个下拉列表并添加了一些代码，其中包含以下代码：

<select name="selecttype" style="width:200px;" class="chzn-select" data-placeholder="Report Type">
    <option value=""></option>
    <option value="Pie">Pie</option>
    <option value="Line">Line</option>
    <option value="Bar">Bar</option>
    <option value="Column">Column</option>
</select>

这是jquery

<script>
$(function(){
    $("[name=selecttype]").change(function(){
        var val = $(this).val();
        var stat;
        if (typeof val !== 'undefined') {
            stat = val;
        }
        else {
            stat = '';
        }
        window.location.href = './corpreport.php?per=<?php echo $_GET['per']; ?>&type='+stat;
        return true;
    });
});
</script>

如果选择Yearly和Pie，它将生成localhost / folder1 / file.php？per = 1＆amp; type = Pie。

但是当我将periode更改为季度时，则链接更改为localhost/folder1/file.php?per=4。

我该怎么做才能建立链接localhost / folder1 / file.php？per = 4＆amp; type = Pie ??

Answer 1

您可以使用以下jQuery：

$(function () {

    $("[name=selectperiode]").change(function () {
        window.location.href = period(this) + type($("[name=selecttype]"));
        return true;
    });
    $("[name=selecttype]").change(function () {
        window.location.href = period($("[name=selectperiode]")) + type(this);
        return true;
    });

    function period(element) {
        var val = $(element).val();
        var stat;
        if (typeof val !== 'undefined') {
            stat = val;
        } else {
            stat = '';
        }
        return './corpreport.php?per=' + stat;
    }

    function type(element) {
        var val = $(element).val();
        var stat;
        if (typeof val !== 'undefined') {
            stat = val;
        } else {
            stat = '';
        }
        return '&type=' + stat;
    }
});

使用此PHP / HTML：

<?php
    $per = (!empty($_GET["per"])) ? $_GET["per"] : '';
    $type = (!empty($_GET["type"])) ? $_GET["type"] : '';
?>
<select name="selectperiode" style="width:200px;" class="chzn-select" data-placeholder="Report Periode">
    <option value=""></option>
    <option value="1" <?php if($per == "1"){echo "selected";} ?>>Yearly</option>
    <option value="4" <?php if($per == "4"){echo "selected";} ?>>Quarterly</option>
</select>
<select name="selecttype" style="width:200px;" class="chzn-select" data-placeholder="Report Type">
    <option value=""></option>
    <option value="Pie" <?php if($type == "Pie"){echo "selected";} ?>>Pie</option>
    <option value="Line" <?php if($type == "Line"){echo "selected";} ?>>Line</option>
    <option value="Bar" <?php if($type == "Bar"){echo "selected";} ?>>Bar</option>
    <option value="Column" <?php if($type == "Column"){echo "selected";} ?>>Column</option>
</select>

Answer 2

为select实例period，type分配ID。获取selects事件change上的值以生成网址。

HTML 的

<select id="period" name="selectperiode" style="width:200px;" class="chzn-select" data-placeholder="Report Periode">
   <option value=""></option>
   <option value="1">Yearly</option>
   <option value="4">Quarterly</option>
</select>


<select id="type"  name="selecttype" style="width:200px;" class="chzn-select" data-placeholder="Report Type">
        <option value=""></option>
        <option value="Pie">Pie</option>
        <option value="Line">Line</option>
        <option value="Bar">Bar</option>
        <option value="Column">Column</option>
</select>

的Javascript

$("[name=selecttype]").change(function(){
    var period = document.getElementById('period').value;
    var type = document.getElementById('type').value;
    window.location.href = './corpreport.php?per=' + period  + '&type='+type;
    return true;
});

Answer 3

<select id="selectperiode" style="width:200px;" class="chzn-select" data-placeholder="Report Periode">
    <option value=""></option>
    <option value="1">Yearly</option>
    <option value="4">Quarterly</option>
</select>
<select id="selecttype" name="selecttype" style="width:200px;" class="chzn-select" data-placeholder="Report Type">
    <option value=""></option>
    <option value="Pie">Pie</option>
    <option value="Line">Line</option>
    <option value="Bar">Bar</option>
    <option value="Column">Column</option>
</select>
Jquery
  $(document).ready(function () {
        $("#selecttype").change(function () {
            var period = $("#selectperiode").val();
            var type = $("#selecttype").val();
            window.location.href = './corpreport.php?per=' + period + '&type=' + type;
            return true;

        });
    });

从多个下拉列表中获取值并为url添加值

3 个答案: