车辆下拉选择器 [英] Vehicle drop down selector
本文介绍了车辆下拉选择器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在这一方面寻求帮助，不幸的是Java语言不是我的强项.我正在创建一个简单的下拉式车辆制造商，型号和年份选择器，该选择器会导致一个链接，该链接将根据所选的用户选项动态创建.
Chasing some help on this one, unfortunately Javascript is not my forte; I am creating a simple drop down vehicle make, model and year selector which leads through to a link which is created dynamically depending on the users options selected.
有效地，用户应该能够选择一个品牌，然后显示与该品牌相关的模型，并最终显示与所选模型相关的一年.我已经能够使用品牌和型号选择了，但是当我尝试通过添加年份来尝试相同的事情时，它将开始显示年份来代替型号.
Effectively the user should be able to select a make and then have a model show up which is associated with that make and finally a year that is associated with the model selected. I have been able to get the make and model selection to work but when I attempt the same thing by adding in the year it starts showing the year in place of the model.
有人可以帮忙吗?我的代码在下面，还有小提琴的链接.
Can someone please assist with this? My code is below along with a link to the fiddle.
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' ),
$model = $( '#model' ),
$options = $model.find( 'option' );
$make.on( 'change', function() {
$model.html( $options.filter( '[value="' + this.value + '"]' ) );
} ).trigger( 'change' );
var $model = $( '#model' ),
$year = $( '#year' ),
$options = $year.find( 'option' );
$model.on( 'change', function() {
$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">
<option class="vehicle-search" value="0">Make</option>
<option class="vehicle-search" value="1">BMW</option>
<option class="vehicle-search" value="2">Daewoo</option>
<option class="vehicle-search" value="3">Ford</option>
<option class="vehicle-search" value="4">Holden</option>
<option class="vehicle-search" value="5">Honda</option>
<option class="vehicle-search" value="6">Hyundai</option>
<option class="vehicle-search" value="7">Isuzu</option>
<option class="vehicle-search" value="8">Kia</option>
<option class="vehicle-search" value="9">Lexus</option>
<option class="vehicle-search" value="10">Mazda</option>
<option class="vehicle-search" value="11">Mitsubishi</option>
<option class="vehicle-search" value="12">Nissan</option>
<option class="vehicle-search" value="13">Peugeot</option>
<option class="vehicle-search" value="14">Subaru</option>
<option class="vehicle-search" value="15">Suzuki</option>
<option class="vehicle-search" value="16">Toyota</option>
<option class="vehicle-search" value="17">Volkswagen</option>
</select>
<!-- Vehicle Model List -->
<select name="model" id="model">
<option value="0">Model</option>
<option class="318i" value="1">318i</option>
<option class="lanos" value="2">Lanos</option>
<option class="courier" value="3">Courier</option>
<option class="falcon" value="3">Falcon</option>
<option class="festiva" value="3">Festiva</option>
<option class="fiesta" value="3">Fiesta</option>
<option class="focus" value="3">Focus</option>
<option class="laser" value="3">Laser</option>
<option class="ranger" value="3">Ranger</option>
<option class="territory" value="3">Territory</option>
<option class="astra" value="4">Astra</option>
<option class="barina" value="4">Barina</option>
<option class="captiva" value="4">Captiva</option>
<option class="colorado" value="4">Colorado</option>
<option class="commodore" value="4">Commodore</option>
<option class="cruze" value="4">Cruze</option>
<option class="rodeo" value="4">Rodeo</option>
<option class="viva" value="4">Viva</option>
</select>
<!-- Vehicle Year List -->
<select name="year" id="year">
<option value="0">Year</option>
<option class="1998-2005" value="1">1998-2005</option>
<option class="1997-2005" value="2">1997-2005</option>
<option class="1997-2005" value="3">1997-2005</option>
<option class="1997-2005" value="3">1997-2005</option>
<option class="1997-2005" value="3">1997-2005</option>
<option class="1997-2005" value="3">1997-2005</option>
<option class="1997-2005" value="3">1997-2005</option>
<option class="1997-2005" value="3">1997-2005</option>
<option class="1997-2005" value="3">1997-2005</option>
<option class="1997-2005" value="3">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
</select>
<input type="submit" name="button" id="button" onclick="showURL();" />
推荐答案
这是因为您一年中也使用相同的$options.
This is because you are using the same $options for year too.
按如下所示更改您的代码.
Change your code like below.
function showURL() {
var d1 = $("#identifier").find(":selected").attr("class");
var url = ("/store/vehicle-selected/" + d1);
window.location = url;
return true;
}
$(document).ready(function() {
var $make = $( '#make' ),
$model = $( '#model' ),
$options = $model.find( 'option' );
$make.on( 'change', function() {
$model.html( $options.filter( '[value="' + this.value + '"]') );
$model.trigger( 'change' );
} ).trigger( 'change' );
var $model = $( '#model' ),
$year = $( '#year' ),
$yearOptions = $year.find( 'option' );
$model.on( 'change', function() {
$year.html( $yearOptions.filter( '[value="' + this.value + '"]' ) );
$year.trigger( 'change' );
} ).trigger( 'change' );
var $year = $( '#year' ),
$identifier = $( '#identifier' ),
$identifierOptions = $identifier.find( 'option' );
$year.on( 'change', function() {
var filteredIdetifiers = $identifierOptions.filter( '[value="' + this.value + '"]' );
debugger
if(!($("#make").val() == 3 && $("#model option:selected").text() == 'Falcon')) {
filteredIdetifiers = filteredIdetifiers.filter(function(i,e){ return e.value !== '3' });
}
$identifier.html(filteredIdetifiers);
$identifier.trigger( 'change' );
} ).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">
<option value="0">Make</option>
<option value="1">BMW</option>
<option value="2">Daewoo</option>
<option value="3">Ford</option>
<option value="4">Holden</option>
<option value="5">Honda</option>
<option value="6">Hyundai</option>
<option value="7">Isuzu</option>
<option value="8">Kia</option>
<option value="9">Lexus</option>
<option value="10">Mazda</option>
<option value="11">Mitsubishi</option>
<option value="12">Nissan</option>
<option value="13">Peugeot</option>
<option value="14">Subaru</option>
<option value="15">Suzuki</option>
<option value="16">Toyota</option>
<option value="17">Volkswagen</option>
</select>
<!-- Vehicle Model List -->
<select name="model" id="model">
<option value="0">Model</option>
<option class="318i" value="1">318i</option>
<option class="lanos" value="2">Lanos</option>
<option class="courier" value="3">Courier</option>
<option class="falcon" value="3">Falcon</option>
<option class="festiva" value="3">Festiva</option>
<option class="fiesta" value="3">Fiesta</option>
<option class="focus" value="3">Focus</option>
<option class="laser" value="3">Laser</option>
<option class="ranger" value="3">Ranger</option>
<option class="territory" value="3">Territory</option>
<option class="astra" value="4">Astra</option>
<option class="barina" value="4">Barina</option>
<option class="captiva" value="4">Captiva</option>
<option class="colorado" value="4">Colorado</option>
<option class="commodore" value="4">Commodore</option>
<option class="cruze" value="4">Cruze</option>
<option class="rodeo" value="4">Rodeo</option>
<option class="viva" value="4">Viva</option>
</select>
<!-- Vehicle Year List -->
<select name="year" id="year">
<option value="0">Year</option>
<option value="1">1998</option>
<option value="1">1999</option>
<option value="1">2000</option>
<option value="1">2001</option>
<option value="1">2002</option>
<option value="1">2003</option>
<option value="1">2004</option>
<option value="1">2005</option>
<option value="2">1997</option>
<option value="2">1998</option>
<option value="2">1999</option>
<option value="2">2000</option>
<option value="2">2001</option>
<option value="2">2002</option>
<option value="2">2003</option>
<option value="3">1991-1999</option>
<option value="4">1997-2007</option>
<option value="5">1997-2007</option>
<option value="3">2002</option>
<option value="3">2003</option>
<option value="3">2004</option>
<option value="3">2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
</select>
<!-- Vehicle Identity List -->
<select name="identifier" id="identifier">
<option value="0">Type</option>
<option class="E46" value="1">E46</option>
<option class="1997-2003" value="2">N/A</option>
<option class="1997-2007" value="4">N/A</option>
<option class="1997-2007" value="5">N/A</option>
<option class="5041618" value="3">BA</option>
<option class="1997-2005" value="3">AU</option>
<option class="1997-2005" value="3">AU2</option>
<option class="1997-2005" value="4">N/A</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
</select>
<input type="submit" name="button" id="button" onclick="showURL();" />
这篇关于车辆下拉选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
