什么是第二个下拉选择向下

Question

HTML

<select id='A' name='A'> 
     <option value='Andorra' selected='selected'>Andorra 
     <option value='Switzerland'> Switzerland 
      <option value='Wyoming'> Wyoming, USA 
    </select> 
    <select id='B' name='B'> 
    </select> 
    <div> 
     <button onclick="window.location='http://www.google.com';">Button1</button> 
     <button onclick="window.location='http://www.facebook.com';">Button2</button> 
    </div> 

的JavaScript

如何改变取决于按钮的URL链接

(function() { 

    var bOptions = { 
    "Andorra": ["A"], 
    "Switzerland": ["B", "V", "G"], 
    "Wyoming": ["D", "DJ", "E", "ZH", "Z", "I", "J"] 
    }; 

    var A = document.getElementById('A'); 
    var B = document.getElementById('B'); 


    A.onchange = function() { 

    B.length = 0; 

    var _val = this.options[this.selectedIndex].value; 

    for (var i in bOptions[_val]) { 

     var op = document.createElement('option'); 

     op.value = bOptions[_val][i]; 

     op.text = bOptions[_val][i]; 

     B.appendChild(op); 
    } 
    }; 

    A.onchange(); 

})(); 

基于什么是第一个下拉选择，选择选项中选择第二个下拉改变了。根据第二个下拉列表中选择的内容，我需要帮助来更改按钮的URL链接。

这里的jsfiddle链接： http://jsfiddle.net/tcfsj2m9/2/

Answer 1

如果你有机会到jQuery的，这是非常容易。首先，我会将<buttons>更改为<a target="_blank">标记，以便我们可以切换href。

$("#A").change(function(){ 
// remove all previous options for #B and reset your buttons 
$("#B").find('option').remove(); 
$(".button-1").attr('href', 'http://google.com'); 
$(".button-2").attr('href', 'http://yahoo.com'); 
// Add the new option(s) to #B based on what was selected in #A 
$("#B").append('<option data-button1="{the_URL_you_want}" data-button2="{the_URL_you_want}">The Value</option>'); 
}) 
$("#B").change(function(){ 
    // Add the new options to the buttons 
    $(".button-1").attr('href', $(this).selected().data('button1')); 
    $(".button-2").attr('href', $(this).selected().data('button2')); 
});