车辆下拉选择器

时间：2017-06-09 06:16:59

标签： jquery html dropdown

在这个问题上寻求一些帮助，遗憾的是Javascript不是我的强项;我正在创建一个简单的下拉车辆制造商，型号和年份选择器，它通向一个链接，该链接根据所选用户选项动态创建。

有效地，用户应该能够选择一个品牌，然后让品牌与该品牌相关联，最后一年与所选品牌相关联。我已经能够使制作和模型选择起作用，但是当我尝试在年份中添加相同的东西时，它开始显示代替模型的年份。

有人可以帮忙吗？我的代码如下，以及指向小提琴的链接。

this

＆＃13;
＆＃13; 
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' );

});
＆＃13; 
<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();" />
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

这是因为您也使用相同的$options年份。

更改您的代码，如下所示。

＆＃13;
＆＃13; 
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' );

});
＆＃13; 
<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();" />
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题