複数の選択ボックスと動的に生成されたリンク

Question

私は非常に基本的な選択メニューを持っています。現在、スイッチ機能を使用しています。選択に基づいて、ボタンへのリンクを割り当てることができます。私のためのブロックは、複数の選択ボックスを持ち、リンクをつかんでそれをボタンに割り当てるセレクタに少なくとも基づいている方法です。

たとえば、最初の選択ボックスには、次のものがあります。車、自転車、ジープ。たとえば「車」の選択に基づいて、関連する選択肢（BMW 3、Audi A4など）を示すセカンドセレクトボックスを希望します。関連するものを表示するための車両の変更について。例えば、 "Honda、Apprilia"などを表示するための "Bikes"。これは[私の現在のコードでは実現可能ですか？

$(document).ready(function(e) { 
 
    $('#basic_plan').change(function(e) { 
 
    var an = $(this).val(); 
 
    switch (an) { 
 

 
     case "ann": 
 
     $('.button-plans a').attr('href', "www.google.com"); 
 
     break; 
 
     case "bi": 
 
     $('.button-plans a').attr('href', "www.yahoo.com"); 
 
     break; 
 
     case "tri": 
 
     $('.button-plans a').attr('href', "www.bing.com"); 
 
     break; 
 
     /* and so on*/ 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="dropdown-plans"> 
 
    <select id="basic_plan" name="bill_cycle"> 
 
    <option value="tri">Cars</option> 
 
    <option value="bi">Bikes</option> 
 
    <option value="ann">Jeeps</option> 
 
    </select> 
 
</div> 
 
<div class="button-plans"> 
 
    <a id="abc" href="something"> Visit now </a> 
 
</div>

Answer 1

私は、あなたが彼らのidに作る選択に応じてその可視性を変更すること、それらをデフォルト（とときchange()トリガ）によって隠さ作るために新しいselect要素にclassを追加しました：二selectについて

$(document).ready(function() { 
    $('#basic_plan').change(function() { 
    $('.second-select').hide(); 
    var an = $(this).val(); 
    switch (an) { 
     case "ann": 
     $('.button-plans a').attr('href', "www.google.com"); 
     $('#jeeps').show(); 
     break; 
     case "bi": 
     $('.button-plans a').attr('href', "www.yahoo.com"); 
     $('#bikes').show(); 
     break; 
     case "tri": 
     $('.button-plans a').attr('href', "www.bing.com"); 
     $('#cars').show(); 
     break; 
     /* and so on */ 
    } 
    }); 
}); 

要素：

$('.second-select').change(function() { 
    var an = $(this).val(); 
    switch (an) { 
     case "1": 
     $('.button-plans a').attr('href', "www.example.com"); 
     break; 
     case "2": 
     $('.button-plans a').attr('href', "www.bitbucket.org"); 
     break; 
     case "3": 
     $('.button-plans a').attr('href', "www.facebook.com"); 
     break; 
    } 
    }); 
}); 

JsFiddle demo

注：：アンカーから404を受け取った理由は、JsFiddleがデフォルトのURLとリンクをURIとして追加することです。

Answer 2

あなたはそれを行うことができます。

$(document).ready(function(e) { 
    $('#basic_plan').change(function() { 
    $('.button-plans a').attr('href', $(this).find('option:selected').attr('data-url')); 
    }); 
}); 

はhttps://jsfiddle.net/6oemzgbo/

その作品を参照してください。