如何根据使用javaScript/Jquery选择的输入类型更改url - How to change url based on input type selected using javaScript/Jquery?

我有一个表单

 <form name="categoryform" method="post">
 Category:<select name="category" id="category" >
 <option value="games">games</option>
 <option value="books">books</option>
 <option value="toys">toys</option>
 <option value="clothes">clothes</option>
 </select>
 Age: <select  multiple name="age" id="age" >
 <option value="5">5</option>
 <option value="10">10</option>
 <option value="15">15</option>
 </select>
 <input type="submit" name="submit" value="submit"/>
 </form>

最初的url是http://localhost/childzone/

如果我从类别中选择选项books，则URL必须更改为http://localhost/childzone/books，而当我选择选项clothes时，URL必须为http://localhost/childzone/clothes。

如果我也从下拉列表age中选择年龄=5，则url必须是http://localhost/childzone/clothes&age=5。对于选择的多个选项，即，如果我从age中同时选择5和10，则url必须是http://localhost/childzone/clothes&age=5,10。

我如何获得这样的URL。我是php的新手，有人能帮我吗。提前感谢

//on books select event use
location.replace("http://localhost/childzone/books");
//on clothes select event use
location.replace("http://localhost/childzone/clothes");

不刷新：-

 //on books select event use
window.history.replaceState(null, "Search Results", "localhost/childzone/books")
//on books select event use
window.history.replaceState(null, "Search Results", "localhost/childzone/books")

这些用于重定向脚本而不刷新页面。让我知道如果这些工作伙伴

function submitnow_urlchange(){
        var cat = jQuery("#category option:selected").val();
        var age = jQuery("#age option:selected");
        var age_holder = [];
        age.each(function(){
          var el = jQuery(this);
          var hold = el.val();
          if(el.val()) age_holder.push(hold);   
        });
        var age_compile = age_holder.join(',');
        var url = cat+"&"+age_compile;
        history.pushState("", "", url);
        return false;
}

这里有一个更详细的jQuery解决方案：

JS:

//Generate url for category
$("select[name='category']").change(function(e) {
    e.preventDefault();
    var a = "http://localhost/childzone/";
    $("div.url").append(a + this.value);
  });
  //Generate URL for the multi-select age list
  var foo = [];
  var a = "http://localhost/childzone/clothes&age=";
  var b = '';
  $("select[name='age']").change(function(e) {
    e.preventDefault();
    $("select[name='age'] :selected").each(function(i, selected) {
      foo[i] = $(selected).text();
      if (b == '') b = b + foo[i]; //if more than one option selected, seperate it by comma.
      else b = b + ',' + foo[i];
    });
    $("div.url").html(a + b); //Append URL to div for reference
    b = ''; //Clear the string holding URL.
  });

我们只需要通过获取我附加在div.url上的URL来调用提交事件。

在此处完成工作

试试这个兄弟在你的表单上添加onsubmit="submitnow（）"，这样函数就可以工作了。如果有问题，请告诉我

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function submitnow(){
        var cat = jQuery("#category option:selected").val();
        var age = jQuery("#age option:selected");
        var age_holder = [];
        age.each(function(){
          var el = jQuery(this);
          var hold = el.val();
          if(el.val()) age_holder.push(hold);   
        });
        var age_compile = age_holder.join(',');
        var url = "http://localhost/childzone/?"+cat+"&"+age_compile;
        return url;
}
</script>
<form name="categoryform" method="post" onsubmit="submitnow();">

这是不可能的。因为如果您尝试更改url，那么页面将被刷新。然后您的选择将重置。您可以通过附加#来实现这一点，或者您必须以某种方式维护选定的值并重新设置它们。