1. 技术文章
  2. Vehicle drop down selector

Vehicle drop down selector

由 别说谁变了你拦得住时间么 提交于 2019-12-08 08:54:00

问题


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();" />

回答1:


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();" />


来源：https://stackoverflow.com/questions/44450566/vehicle-drop-down-selector

标签
jquery
html
dropdown
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!