如何根据第二个下拉列表中选择的内容更改按钮的URL链接

How to change URL links of the buttons depending on what is selected in second drop down

本文关键字：按钮 链接 URL 第二个 下拉列表 选择 何根      更新时间：2023-09-26

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

(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/

如果你可以访问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'));
});
相关文章：