車のドロップダウンセレクタ

Question

残念ながらJavascriptは私の特典ではありません。私は選択されたユーザーのオプションに応じて動的に作成されるリンクにつながる単純なドロップダウン車種、モデル、年選択を作成しています。

効果的に、ユーザーはメイクを選択して、そのメイクに関連付けられたモデルを表示し、最後に選択したモデルに関連付けられた年を表示できます。私はmakeとモデルの選択を行うことができましたが、同じことを年に追加してみると、モデルの代わりに年が表示され始めます。

誰か助けてもらえますか？私のコードは下にあり、フィドルへのリンクもあります。

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

Answer 1

あなたも年に同じ$optionsを使用しているためです。

コードを次のように変更します。

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'), 
 
\t \t $model = $('#model'), 
 
    $options = $model.find('option'); 
 
    
 
$make.on('change', function() { 
 
\t $model.html($options.filter('[value="' + this.value + '"]')); 
 
    $model.trigger('change'); 
 
}).trigger('change'); 
 

 
var $model = $('#model'), 
 
\t \t $year = $('#year'), 
 
    $yearOptions = $year.find('option'); 
 
    
 
$model.on('change', function() { 
 
\t $year.html($yearOptions.filter('[value="' + this.value + '"]')); 
 
    $year.trigger('change'); 
 
}).trigger('change'); 
 

 
var $year = $('#year'), 
 
\t \t $identifier = $('#identifier'), 
 
    $identifierOptions = $identifier.find('option'); 
 
    
 
$year.on('change', function() { 
 
\t var filteredIdetifiers = $identifierOptions.filter('[value="' + this.value + '"]'); 
 
    debugger 
 
\t \t 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"> 
 
\t <option value="0">Make</option> 
 
\t <option value="1">BMW</option> 
 
\t <option value="2">Daewoo</option> 
 
\t <option value="3">Ford</option> 
 
\t <option value="4">Holden</option> 
 
\t <option value="5">Honda</option> 
 
\t <option value="6">Hyundai</option> 
 
\t <option value="7">Isuzu</option> 
 
\t <option value="8">Kia</option> 
 
\t <option value="9">Lexus</option> 
 
\t <option value="10">Mazda</option> 
 
\t <option value="11">Mitsubishi</option> 
 
\t <option value="12">Nissan</option> 
 
\t <option value="13">Peugeot</option> 
 
\t <option value="14">Subaru</option> 
 
\t <option value="15">Suzuki</option> 
 
\t <option value="16">Toyota</option> 
 
\t <option 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 value="1">1998</option> 
 
\t <option value="1">1999</option> 
 
\t <option value="1">2000</option> 
 
\t <option value="1">2001</option> 
 
\t <option value="1">2002</option> 
 
\t <option value="1">2003</option> 
 
\t <option value="1">2004</option> 
 
\t <option value="1">2005</option> 
 
\t <option value="2">1997</option> 
 
\t <option value="2">1998</option> 
 
\t <option value="2">1999</option> 
 
\t <option value="2">2000</option> 
 
\t <option value="2">2001</option> 
 
\t <option value="2">2002</option> 
 
\t <option value="2">2003</option> 
 
\t <option value="3">1991-1999</option> 
 
\t <option value="4">1997-2007</option> 
 
\t <option value="5">1997-2007</option> 
 
\t <option value="3">2002</option> 
 
\t <option value="3">2003</option> 
 
\t <option value="3">2004</option> 
 
\t <option value="3">2005</option> 
 
\t <option value="4">1997-2005</option> 
 
\t <option value="4">1997-2005</option> 
 
\t <option value="4">1997-2005</option> 
 
\t <option value="4">1997-2005</option> 
 
\t <option value="4">1997-2005</option> 
 
\t <option value="4">1997-2005</option> 
 
\t <option value="4">1997-2005</option> 
 
\t <option value="4">1997-2005</option> 
 
</select> 
 
<!-- Vehicle Identity List --> 
 
<select name="identifier" id="identifier"> 
 
\t <option value="0">Type</option> 
 
\t <option class="E46" value="1">E46</option> 
 
\t <option class="1997-2003" value="2">N/A</option> 
 
\t <option class="1997-2007" value="4">N/A</option> 
 
\t <option class="1997-2007" value="5">N/A</option> 
 
\t <option class="5041618" value="3">BA</option> 
 
\t <option class="1997-2005" value="3">AU</option> 
 
\t <option class="1997-2005" value="3">AU2</option> 
 
\t <option class="1997-2005" value="4">N/A</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();" />