다중 드롭 다운에서 값을 가져와 url에 값을 추가하십시오.

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> 

을 그리고 이것은 로컬 호스트/폴더 1/file.php 당 = 1 & 형 생산합니다

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

JQuery와 무엇입니까?를 = Yearly and Pie를 선택하면 Pie.

그러나 periode을 분기로 변경하면 링크가 localhost/folder1/file.php?per=4으로 변경됩니다.

링크를 만들려면 어떻게해야합니까? localhost/folder1/file.php? per = 4 & type = Pie ??

Answer 1

다음과 같은 jQuery를 사용할 수 있습니다 :이 PHP/HTML로

$(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 
    $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

예 : period, type과 같이 모두 select에 ID를 지정하십시오. URL을 만들려면 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> 

자바 스크립트

$("[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; 

     }); 
    });