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>

立即选择每个下拉列表后，即刷新为选定的网址，

我正在寻找代码，如果我们选择第一个下拉菜单，然后选择下一个，我需要像下面这样形成第二个下拉第一个选项的网址。

示例：如果选择了“测试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;
 }

如果第二个选择中有第五个选项，我将从网址中排除第二个参数。如果您有任何问题，请提问。

根据php中的Url参数选择选项

2 个答案: