Mit JS select Werte abfragen und auf bestimmte URL weiterleiten?
Hallo zusammen,
ich habe zwei Select Formulare auf meiner Seite, die sozusagen in "Reihe" geschaltet werden sollen.
Sozusagen so:
Ich wähle bei dem ersten Select Formular "Option A" aus und bei dem zweiten Formular "Option D" (nur so als Beispielwerte). Mit einem Klick auf den "Suchen" Button wird man auf die passende URL weitergeleitet, die sich je nachdem, was man an Werte-Kombination wählt, unterscheidet.
Zum Beispiel leitet die Kombination aus "Option B" + "Option D" -> auf example.de/hallo weiter.
"Option A" + "Option E" auf example.de/tschüss
Habt ihr dazu Stichworte, wonach ich im Netz suchen kann? Ich finde bisher nichts dazu bzw. weiß nicht, wonach ich suchen soll.
Vielleicht habt ihr auch einen Ansatz.
Vielen Dank schonmal im Voraus :)
Gruß
3 Antworten
hier mal was fertiges
https://jsfiddle.net/q0txmb4y/8/
HTML
<form>
<select id="domain">
<option value="www.google.com/search?q=">google</option>
<option value="www.startpage.com/do/dsearch?query=" selected="selected">startpage</option>
<option value="metager.de/search?btnG=Metager+search&q=">metager</option>
</select>
<select id="adresse">
<option >Tisch</option>
<option selected="selected">Stuhl</option>
<option >Bein</option>
</select>
<button type="click" onclick="oeffnen();return false;">
zurseite
</button>
</form>
JavaScript
function oeffnen() {
var s1 = document.getElementById("domain");
var strDomainSearch = s1.value;
var s2 = document.getElementById("adresse");
var strKeyWord = s2.options[s2.selectedIndex].value;
var url = 'https://'+strDomainSearch+strKeyWord;
/* entweder */
// location.href =url;
// oder hier zum testen , weil suchmaschinen keine frames in jsfiddle mögen */
window.open(url,'_blank');
}
Eine Map würde sich dafür eignen.
Du musst nur iregndwie einen passenden Key basteln.
Es geht um das Mapping von einer Kombination von Optionen zu einer URL.
Entsprechen kann eine Map Sinn machen (evtl. auch mehrere ineinander verschachtelte).
Was genau das für Maps sind, müsste man sehen, je nachdem, wie voll die besetzt sind, könnte man die z.B. als Array oder als HashMap impelmentieren.
häh , ich glaub du hast da was durcheinader bekommen . aber komplett .
Ne, das passt schon. Ich betrachte aber wohl einen anderen Teil als du.
Mir ging es darum, die Optionen auf URLs zu mappen, das ist ja nicht unbedingt trivial, wenn es mehrstufig ist.
er hat nicht gesagt, wenn ich dies auswähle will ich eine neue anzeige von entsprechenden möglichkeiten . aber es könnte sein das er suboptionen haben will . bisher jedenfalls nicht .
Zum Beispiel leitet die Kombination aus "Option B" + "Option D" -> auf example.de/hallo weiter.
Klingt für mich doch nach genau dem, was ich beschrieben habe.
Er will für eine Kombination aus Optionen auf eine Seite weiterleiten. Und dafür muss er für die erlaubten Kombinationen definieren auf welche Seite weitergeleitet werden soll.
ins submit eine funktion einbauen die dann ...
location.href ="url...." auswährt und vorher die daten sammelt und verbindet.
z.b.
und dann mit document.getElementById("feldid").value die daten aus den feldern holen , geht auch mit forms....
oder auch https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript
If you have a select element that looks like this:
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
Running this code:
var e = document.getElementById("ddlViewBy");
var strUser = e.value;
Would make
strUser
be
2
. If what you actually want is
test2
, then do this:
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;
Hey, danke für die ausführliche Antwort.
ich bin mir ganz sicher, aber ich glaube etwas ähnliches habe ich schon gemacht:
-------
<select id="first">
<option>4</option>
<option>3</option>
<option>2</option>
<option>1</option>
</select>
---------
<select id="second">
<option>Tour-Art wählen</option>
<option>zu Fuß</option>
<option>mit dem Fahrrad</option>
</select>
-------
function redirect() {
let first = document.querySelector('#first');
let second = document.querySelector('#second');
let target = first.options[first.options.selectedIndex].value + second.options[second.options.selectedIndex].value;
console.log("Redirecting to " + target);
//location.href = location.href + "/" + target;
}
naja nicht ganz
first.options[first.selectedIndex].value
das selectedIndex hängt ja am feld und nicht an den einzelnen optionen :) logisch oder .
Wenns logisch und leicht wäre .. ;-) danke für die Unterstützung :)
das klingt schon so surreal , was hat eine map mit select feldern zu tun ?