jquery dropdownlist, onchange die Seite neu laden mit Get-Anfrage mit der ID der dropdown-Wert

Wenn jemand wählt ein Element in einem dropdown möchte ich die aktuelle Seite neu laden mit dem Wert der ID in das ausgewählte Element in der querystring wie:

http://www.example.com/mypage?id=234

Wie kann ich dies tun?

Könnten Sie ein Beispiel geben, in der dropdown-Liste?

InformationsquelleAutor Blankman | 2010-09-14

Können Sie die raw-javascript-version, die Dutchie432 festgestellt oder die jQuery-version.

<select id="the_select">
  <option value="123">Go to 123</option>
  <option value="456">Go to 456</option>
<select>

<script type="text/javascript">
$(function(){
  $("#the_select").change(function(){
    window.location='http://www.domain.com/mypage?id=' + this.value
  });
});
</script>

Große Follow-up.

InformationsquelleAutor BBonifield

jQuery wird nicht benötigt. grundlegende Javascript-tun Sie gerade fein in diesem Fall.

Fügen Sie einfach ein "onchange" - Ereignis, um Ihre drop-down -

<select onchange="doAction(this.value);">
  <option value="123">Go to 123</option>
  <option value="456">Go to 456</option>
<select>

fügen Sie dann die Funktion, die aufgerufen wird, wenn der Wert geändert

<script type="text/javascript"><!--
    function doAction(val){
        //Forward browser to new url
        window.location='http://www.domain.com/mypage?id=' + val;
    }
--></script>

ODER Die kompakte version, ohne seperate JS-Code

<select onchange="window.location='http://www.domain.com/mypage?id=' + this.value;">
  <option value="123">Go to 123</option>
  <option value="456">Go to 456</option>
<select>

InformationsquelleAutor Dutchie432

<select id="items" onselect="javascript:reloadPage(this)">
  <option name="item1">Item 1</option>
</select>

Skript:

function reloadPage(id) {
   document.location.href = location.href + '?id=' + id.value;
}

Was über die zweite get-Anforderung; wird es nicht append query-string der aktuellen url), die bereits mit query-string.

InformationsquelleAutor Stephan Muller

Folgenden code wird überprüft,

Ist die URL mit den jeweiligen parameter, wenn nicht, fügen Sie es hinzu.
Wenn der parameter gefunden wird, ersetzen Sie den parameter mit dem neuen
ausgewählten Wert.

Laden Sie die Seite neu.

$(function () {
    $("#the_select").change(function () {

        if (window.location.href.indexOf("?") < 0) {
            window.location.href = window.location.href + "?mypage="+ this.value;
        }
        else{
            window.location.href = replaceUrlParam(window.location.href, "mypage", this.value)
        } 

    });
});


function replaceUrlParam(url, paramName, paramValue)
{
    var pattern = new RegExp('\\b(' + paramName + '=).*?(&|$)')
    if (url.search(pattern) >= 0)
    {
        return url.replace(pattern, '$1' + paramValue + '$2');
    }
    return url + (url.indexOf('?') > 0 ? '&' : '?') + paramName + '=' + paramValue
}

InformationsquelleAutor BJ Patel

Besser ist die Verwendung <form> da, im anderen Weg, der alle Felder, die nicht Anhängen in der url. In dieser Ursache @BJ Patel wollte dieses problem lösen, in dem eine andere Antwort hier rein.

Also, Wenn Sie form für diese, wenn Sie weitere Felder im Formular, nach dem Absenden, dass alle Anhängen und ersetzen Sie mit neuen Wert in der URL. Siehe:

<form method="get" action="http://www.example.com/mypage" id="form">
  <select id="the_select" name="id">
    <option value="123">Go to 123</option>
    <option value="456">Go to 456</option>
    <option value="789">Go to 789</option>
  <select>
</form>

<script type="text/javascript">
$(function(){
  $("#the_select").change(function(){
    $("#form").submit();
  });
});
</script>

InformationsquelleAutor Nabi K.A.Z.

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.