根據php中的Url參數選擇選項

Question

我需要根據url參數選擇兩個下拉菜單

這是我的代碼

 <select id="parent-cat" name="parent-cat" onchange="getFilterUrl(this.value)">                              
    <option value="www.site.co/?test=101">Test 1</option>                                    
    <option value="www.site.co/?test=102">Test 2</option>  
 </select>

<select id="child-cat" name="child-cat" 
onchange="getFilterUrl(this.value)">  

  <option value="www.site.com/?sample=95">Sample 1</option>
   <option value="www.site.co/?sample=96">Sample 2</option>
   <option value="www.site.co/?sample=97">Sample 3</option>
   <option value="www.site.co/?sample=98">Sample 4</option>
   <option value="www.site.co" selected="">Sample 5</option>
 </select>

<script>
  function getFilterUrl(filterurl) {
    var url = filterurl;        
      if (url) { 
          window.location = url; // redirect
      }
      return false;
 }
</script>

現在，選擇每個下拉列表后，即刷新為所選的網址，

我在尋找代碼，如果我們選擇第一個下拉菜單，然后選擇下一個，則需要為第二個下拉第一個選項形成如下所示的url。

示例：如果選擇了“測試1”，則選擇了“樣本1”，“網址”應類似於以下w，同時選擇了兩個選項

site.co/?test=102&sample=95

如何做到這一點？

請任何人幫助我實現這一目標。

謝謝

Answer 1

正如我所說，您的問題不清楚

這是您代碼的固定版本。

 document.getElementById("container").addEventListener("change",function(e) { var parent = document.getElementById("parent-cat").value, child = document.getElementById("child-cat").value; if (parent && child) { var url = "https://site.co?"+parent+"&"+child; console.log(url) // window.location=url; } }); 

 <div id="container"> <select id="parent-cat" name="parent-cat"> <option value="">Please select</option> <option value="test=101">Test 1</option> <option value="test=102">Test 2</option> </select> <select id="child-cat" name="child-cat" > <option value="">Please select</option> <option value="sample=95">Sample 1</option> <option value="sample=96">Sample 2</option> <option value="sample=97">Sample 3</option> <option value="sample=98">Sample 4</option> </select> </DIV> 

在PHP中：

 document.getElementById("container").addEventListener("change", function(e) { var parent = document.getElementById("parent-cat").value, child = document.getElementById("child-cat").value; document.getElementById("message").innerHTML= parent && child ? "":"Please choose both"; if (parent && child) document.getElementById("myForm").submit(); }); 

 <form action="redirect.php" id="myForm" method="post"> <div id="container"> <select id="parent-cat" name="parent-cat"> <option value="">Please select</option> <option value="test=101">Test 1</option> <option value="test=102">Test 2</option> </select> <select id="child-cat" name="child-cat"> <option value="">Please select</option> <option value="sample=95">Sample 1</option> <option value="sample=96">Sample 2</option> <option value="sample=97">Sample 3</option> <option value="sample=98">Sample 4</option> </select> </div> </form> <span id="message"></span> 

使用

$parent = isset($_POST['parent-cat']) ? $_POST['parent-cat'] : null;
$child = isset($_POST['child-cat']) ? $_POST['child-cat'] : null;
if ($parent && $child) {
  header("location: https:///www.site.co?".$parent."&".$child);
}

Answer 2

如果您不想在選擇任何人后立即重定向，則只需擦除其中一個onchange事件即可。

HTML：

<select id="parent-cat" name="parent-cat" onchange="getFilterUrl()">                              
    <option value="test=101">Test 1</option>                                    
    <option value="test=102">Test 2</option>  
 </select>

<select id="child-cat" name="child-cat" 
onchange="getFilterUrl()">  

  <option value="sample=95">Sample 1</option>
   <option value="sample=96">Sample 2</option>
   <option value="sample=97">Sample 3</option>
   <option value="sample=98">Sample 4</option>
   <option value="www.site.co" selected="">Sample 5</option>
 </select>

腳本：

function getFilterUrl(filterurl) {

       var s1 = $('#parent-cat').val();
       var s2 = $('#child-cat').val();
       if (s2 == 'www.site.co') {
           s2 = '';
       }
       window.location.replace("http://www.site.co/?"+s1+'&'+s2);

      return false;
 } 

如果第二個選擇中有第五個選項，我將從URL中排除第二個參數。 如果您有任何問題，請提問。