動的にURLを選択ボックスに追加する

Question

私は次の選択メニュー：JSFIDDLEを持っています。これまでのところ、すべてが意図どおりに動作します。私の唯一の問題は、すでに存在するものの上にURLを構築する方法です。たとえば、自転車オプションを選択して今すぐ訪問すると、www.yahoo.comにリダイレクトされます。私がしたいのは、既存のURLの余分なビットを追加するために2番目の選択ボックスのオプションが選択されたときです。たとえば、バイク：www.yahoo.com >>バイク - >バイク2 = www.yahoo.com/bike2。 I

PS：私が避けようとしているのは、手動でURL全体を追加することです。 alredyの既存のURLに「/ bike2」というビットを追加したいと思います。助けてもらえますか？ここで

$(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; 
 
    } 
 
    }); 
 
});

.second-select { 
 
    margin-top: 5px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/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> 
 
    <br /> 
 
    <select id="cars" class="second-select"> 
 
    <option value="1">Car1</option> 
 
    <option value="2">Car2</option> 
 
    <option value="3">Car3</option> 
 
    </select> 
 
    <select id="bikes" class="second-select"> 
 
    <option value="1">Bike1</option> 
 
    <option value="2">Bike2</option> 
 
    <option value="3">Bike3</option> 
 
    </select> 
 
    <select id="jeeps" class="second-select"> 
 
    <option value="1">Jeep1</option> 
 
    <option value="2">Jeep2</option> 
 
    <option value="3">Jeep3</option> 
 
    </select> 
 
</div> 
 
<div class="button-plans"> 
 
    <a id="abc" href="#"> Visit now </a> 
 
</div>

Answer 1

working Fiddle

そして、あなたの2番目のドロップダウン変更機能への変更

$('.second-select').change(function() { 
    var an = $(this).val(); 
    var text = $(this).find('option:selected').text(); 
    var anchorTag = $('#abc'); 
    switch (an) { 
     case "1": 
     anchorTag.attr('href', anchorTag.attr('href')+'/' + text); 
     break; 
     case "2": 
     anchorTag.attr('href', anchorTag.attr('href')+'/' +text); 
     break; 
     case "3": 
     anchorTag.attr('href', anchorTag.attr('href')+'/' +text); 
     break; 
    } 
    }); 

しかし、このコードで、あなたがドロップダウン選択を変更する場合は、複数回最終的なURLは混乱するでしょう。既存のものを呼び出すことも、それを正しく操作することもありません。このアプローチは混乱し、エラーが発生しやすくなります。

---

私は訪問が今クリックすると、そのリンクにリダイレクトするときのURLを計算することをお勧め。ここにはWorking Fiddle

あなたの完全なスクリプトは次のようになります。

$(document).ready(function() { 
    $('#basic_plan').change(function() { 
    $('.second-select').hide(); 
    var an = $(this).val(); 
    switch (an) { 
     case "ann":  
     $('#jeeps').show(); 
     break; 
     case "bi":  
     $('#bikes').show(); 
     break; 
     case "tri":  
     $('#cars').show(); 
     break; 
     /* and so on */ 
    } 
    }); 

    $('#abc').on('click',function(e){ 
    e.preventDefault(); 
    var anchorUrl = GetMainLink(); 
    window.open(anchorUrl, '_blank'); //open the link 
    }); 


    function GetMainLink(){ 
    var mainSelection = $('#basic_plan').val(); 
    switch (mainSelection) { 
     case "ann": return "www.google.com" + '/' + $('#jeeps').find('option:selected').text();   
     break; 
     case "bi":return "www.yahoo.com"+ '/' + $('#bikes').find('option:selected').text();  
     break; 
     case "tri":return "www.bing.com"+ '/' + $('#cars').find('option:selected').text();  
     break; 
     /* and so on */ 
    } 
    } 

}); 

ここでの利点は、ドロップダウンが変更されていなくても、URLが正しく開かれていることです。

最初のドロップダウンを変更せずに試してください。また、2番目のドロップダウンを変更せずに試してみてください。

Answer 2

たぶん、このような何か（自動オプションを使用して作業していて、あなたが何かを選択したときに動作しません）：

$(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(); 
 
    var domain = $('.button-plans a').attr('href').split("/")[0]; 
 
    var link = domain +"/"+ $(this).attr("id")+ an; 
 
    
 
    
 
    switch (an) { 
 
     case "1": 
 
     $('.button-plans a').attr('href', link); 
 
     break; 
 
     case "2": 
 
     $('.button-plans a').attr('href', link); 
 
     break; 
 
     case "3": 
 
     $('.button-plans a').attr('href', link); 
 
     break; 
 
    } 
 
    }); 
 
});

.second-select { 
 
    margin-top: 5px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/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> 
 
    <br /> 
 
    <select id="cars" class="second-select"> 
 
    <option value="1">Car1</option> 
 
    <option value="2">Car2</option> 
 
    <option value="3">Car3</option> 
 
    </select> 
 
    <select id="bikes" class="second-select"> 
 
    <option value="1">Bike1</option> 
 
    <option value="2">Bike2</option> 
 
    <option value="3">Bike3</option> 
 
    </select> 
 
    <select id="jeeps" class="second-select"> 
 
    <option value="1">Jeep1</option> 
 
    <option value="2">Jeep2</option> 
 
    <option value="3">Jeep3</option> 
 
    </select> 
 
</div> 
 
<div class="button-plans"> 
 
    <a id="abc" href="#"> Visit now </a> 
 
</div>

Answer 3

は、私はちょうど第二にいくつかのことを変更して選択：

$('.second-select').change(function() { 
var an = $(this).val(); 
$('#basic_plan').change(); 
switch (an) { 
    case "1": 
    $('.button-plans a').attr('href', $('.button-plans a').attr('href')+"/extra"); 
    break; 
    case "2": 
    $('.button-plans a').attr('href', $('.button-plans a').attr('href')+"/extra2"); 
    break; 
    case "3": 
    $('.button-plans a').attr('href', $('.button-plans a').attr('href')+"extra3"); 
    break; 
} 
}); 

Answer 4

これはトリックを行います。ここで

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

$('.second-select').change(function() { 
    var an = $(this).val(); 
    var text = $(this).find('option:selected').text(); 
    switch (an) { 
     case "1": 
     $('.button-plans a').attr('href', carUrl+'/' + text); 
     break; 
     case "2": 
     $('.button-plans a').attr('href', bikeUrl+'/' + text); 
     break; 
     case "3": 
     $('.button-plans a').attr('href', jeepUrl+'/' + text); 
     break; 
    } 
    }); 
}); 

fiddle