0

私はフォームを持っています

 <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 も選択した場合age、URL はhttp://localhost/childzone/clothes&age=5. 複数のオプションを選択した場合、つまり、ageURLから 5 と 10 の両方を選択した場合は、 http://localhost/childzone/clothes&age=5,10.

どうすればそのような URL を取得できますか。私はphpを初めて使用します。誰でも助けてくれますか。前もって感謝します

4

5 に答える 5

1

これは、より詳細な jQuery ソリューションの 1 つです。

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.
  });

に追加した URL を取得して、submit イベントを呼び出すだけdiv.urlです。

ここで完全な作業フィドル

于 2014-10-09T11:20:34.687 に答える
1 
//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")
于 2014-10-09T09:50:25.273 に答える
1

これらは、ページを更新せずにリダイレクト スクリプトを作成するためのものです。

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;
}
于 2014-10-09T10:35:33.200 に答える
0

このブロをフォームに 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();">
于 2014-10-09T10:20:52.370 に答える
-1

これは不可能です。URLを変更しようとすると、ページが更新されるためです。その後、選択がリセットされます。# を追加することでこれを行うことができます。または、選択した値を何らかの方法で維持し、再度設定する必要があります。

于 2014-10-09T09:58:12.383 に答える