1
Jagen Hilfe zu diesem, leider Javascript ist nicht meine Stärke; Ich erstelle einen einfachen Dropdown-Automaten-, Modell- und Jahresselektor, der zu einem Link führt, der abhängig von den ausgewählten Benutzeroptionen dynamisch erstellt wird.Fahrzeug-Auswahlschalter
Effektiv sollte der Benutzer in der Lage sein, eine Marke auszuwählen und dann ein Modell anzeigen zu lassen, das dieser Marke zugeordnet ist, und schließlich ein Jahr, das dem ausgewählten Modell zugeordnet ist. Ich war in der Lage, die Marken- und Modellauswahl zum Laufen zu bringen, aber wenn ich dasselbe versuche, indem ich im Jahr hinzufüge, zeigt es das Jahr anstelle des Modells an.
Kann mir bitte jemand dabei helfen? Mein Code ist unten zusammen mit einem Link zur Geige.
http://jsfiddle.net/Yash91/qtd7patd/
function showURL() {
var d1 = $("#make").find(":selected").attr("class");
var d2 = $("#model").find(":selected").attr("class");
var d3 = $("#year").find(":selected").attr("class");
var url = ("http://www.web.com.au/" + d1 + "/" + d2 + "/" + d3);
window.location = url;
return true;
}
$(document).ready(function() {
var $make = $('#make'),
\t \t $model = $('#model'),
$options = $model.find('option');
$make.on('change', function() {
\t $model.html($options.filter('[value="' + this.value + '"]'));
}).trigger('change');
var $model = $('#model'),
\t \t $year = $('#year'),
$options = $year.find('option');
$model.on('change', function() {
\t $year.html($options.filter('[value="' + this.value + '"]'));
}).trigger('change');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Vehicle Brand Selector List -->
<select name="make" id="make">
\t <option class="vehicle-search" value="0">Make</option>
\t <option class="vehicle-search" value="1">BMW</option>
\t <option class="vehicle-search" value="2">Daewoo</option>
\t <option class="vehicle-search" value="3">Ford</option>
\t <option class="vehicle-search" value="4">Holden</option>
\t <option class="vehicle-search" value="5">Honda</option>
\t <option class="vehicle-search" value="6">Hyundai</option>
\t <option class="vehicle-search" value="7">Isuzu</option>
\t <option class="vehicle-search" value="8">Kia</option>
\t <option class="vehicle-search" value="9">Lexus</option>
\t <option class="vehicle-search" value="10">Mazda</option>
\t <option class="vehicle-search" value="11">Mitsubishi</option>
\t <option class="vehicle-search" value="12">Nissan</option>
\t <option class="vehicle-search" value="13">Peugeot</option>
\t <option class="vehicle-search" value="14">Subaru</option>
\t <option class="vehicle-search" value="15">Suzuki</option>
\t <option class="vehicle-search" value="16">Toyota</option>
\t <option class="vehicle-search" value="17">Volkswagen</option>
</select>
<!-- Vehicle Model List -->
<select name="model" id="model">
\t <option value="0">Model</option>
\t <option class="318i" value="1">318i</option>
\t <option class="lanos" value="2">Lanos</option>
\t <option class="courier" value="3">Courier</option>
\t <option class="falcon" value="3">Falcon</option>
\t <option class="festiva" value="3">Festiva</option>
\t <option class="fiesta" value="3">Fiesta</option>
\t <option class="focus" value="3">Focus</option>
\t <option class="laser" value="3">Laser</option>
\t <option class="ranger" value="3">Ranger</option>
\t <option class="territory" value="3">Territory</option>
\t <option class="astra" value="4">Astra</option>
\t <option class="barina" value="4">Barina</option>
\t <option class="captiva" value="4">Captiva</option>
\t <option class="colorado" value="4">Colorado</option>
\t <option class="commodore" value="4">Commodore</option>
\t <option class="cruze" value="4">Cruze</option>
\t <option class="rodeo" value="4">Rodeo</option>
\t <option class="viva" value="4">Viva</option>
</select>
<!-- Vehicle Year List -->
<select name="year" id="year">
\t <option value="0">Year</option>
\t <option class="1998-2005" value="1">1998-2005</option>
\t <option class="1997-2005" value="2">1997-2005</option>
\t <option class="1997-2005" value="3">1997-2005</option>
\t <option class="1997-2005" value="3">1997-2005</option>
\t <option class="1997-2005" value="3">1997-2005</option>
\t <option class="1997-2005" value="3">1997-2005</option>
\t <option class="1997-2005" value="3">1997-2005</option>
\t <option class="1997-2005" value="3">1997-2005</option>
\t <option class="1997-2005" value="3">1997-2005</option>
\t <option class="1997-2005" value="3">1997-2005</option>
\t <option class="1997-2005" value="4">1997-2005</option>
\t <option class="1997-2005" value="4">1997-2005</option>
\t <option class="1997-2005" value="4">1997-2005</option>
\t <option class="1997-2005" value="4">1997-2005</option>
\t <option class="1997-2005" value="4">1997-2005</option>
\t <option class="1997-2005" value="4">1997-2005</option>
\t <option class="1997-2005" value="4">1997-2005</option>
\t <option class="1997-2005" value="4">1997-2005</option>
</select>
<input type="submit" name="button" id="button" onclick="showURL();" />
Dankes- sehr für Ihre Antwort! Das scheint das Problem mit dem Jahr für die meisten Fahrzeuge gelöst zu haben, aber für eine Option wie BMW, da es nur ein einziges Modell gibt, scheint das Jahr nicht anzustoßen, da der Code die Änderung nicht zu erkennen scheint. Es sieht auch so aus, als ob es die Jahre, in denen sich das Modell ändert, nicht löscht, gibt es trotzdem etwas, damit diese beiden Dinge richtig funktionieren? Wieder schätze die Antwort! :) – Yash
@Yash überprüfen Sie die aktualisierte Antwort, müssen Sie das Änderungsereignis auslösen. Hoffe das hilft! –
Vielen Dank so viel! Macht jetzt absolut Sinn. Nochmals vielen Dank, dass Sie sich die Zeit nehmen, um zu antworten :) – Yash