Question

  <div class=" row text-center">
    text1 : <select id='A' name='A'>
    <option value='Select first' selected='selected'>Select first</option>
      <option value='1'>1</option>
      <option value='2'>2</option>
  </select>
</div>

    <div class=" row text-center">
       text2 :<select id='B' name='B'></select></div>

这是选择1的上述2个div并选择2.选择2取决于选择1，选择2数据存储在变量中，如下所示

<script type="text/javascript">
(function() {


var bOptions = {
"1": ["1","2","3","4","5"],
"2": ["2","4","6","8"],


};

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


A.onchange = function() {
//clear out B
B.length = 0;
//get the selected value from A
var _val = this.options[this.selectedIndex].value;
//loop through bOption at the selected value
for (var i in bOptions[_val]) {
  //create option tag
  var op = document.createElement('option');
  //set its value
  op.value = bOptions[_val][i];
  //set the display label
  op.text = bOptions[_val][i];
  //append it to B
  B.appendChild(op);
}
 };
//fire this to update B on load
  A.onchange();

})();
</script>

当我点击第二个下拉列表时，它应该转到某个链接。即如何将其重定向到某个网址，如果单击5（从第二个下拉列表），则说5.html

Answer 1

如果您希望第二个下拉列表包含存储在bOptions中的数组中的每个值，这些值与第一个下拉列表中的选择相对应，只需删除逗号分隔列表周围的引号即可。

<强> UPDATE1：

如果您希望选择第二个下拉列表重定向到另一个页面，可以将其添加到$("#B").change()调用的函数中。

<强> UPDATE2：

如果你想存储一对标签和网址值，一种方法是将它们都包含在你的数组中，并使用一个特殊的字符，以后可以用来分隔它们。您可以将一个应用于op.text，将另一个应用于op.value。

＆＃13;

(function() {
  var bOptions = {
    "1": ["1:val1", "2:val2", "3:val3", "4:foo", "5:bar", "6:val6"],
    "2": ["2:val2", "4:val4", "6:val6", "8:val8", "10:val10"],
  };

  var A = document.getElementById('A');
  var B = document.getElementById('B');

  A.onchange = function() {
    //clear out B
    B.length = 0;
    //get the selected value from A
    var _val = this.options[this.selectedIndex].value;
    //loop through bOption at the selected value
    for (var i in bOptions[_val]) {
      //create option tag
      var op = document.createElement('option');
      //set its value
      op.value = bOptions[_val][i].split(":")[1];
      //set the display label
      op.text = bOptions[_val][i].split(":")[0];
      //append it to B
      B.appendChild(op);
    }
  };
  //fire this to update B on load
  A.onchange();

  $("#B").change(function() {
    var url = $(this).val() + ".html";
    alert(url); //added for testing, remove in your code
    window.location.href = url;
  });

})();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" row text-center">
  text1 : <select id='A' name='A'>
    <option value='Select first' selected='selected'>Select first</option>
      <option value='1'>1</option>
      <option value='2'>2</option>
  </select>
</div>

<div class=" row text-center">
  text2 :<select id='B' name='B'></select></div>

＆＃13;

Answer 2

由于您已在jQuery中标记了问题，

$('#A').on('change',function(){
   let currentVal = $(this).val() + "";
   var values = bOptions[currentVal];
   if(values.length)  
   {
       for(var z = 0 ; z < values.length ; z++)
       {
           $('#B').append("<option value='"+values[z]+"'>"+values[z]+"</option>");
       }
   }
});

因为您稍后为重定向事物添加了它！

$(document).on('change','#B' , function(){
   let currentVal = $(this).val() + "";
   var tmpFile = currentVal + '.html';
   window.location.href = tmpFile;
});

我有两个选择第二个是从JSON获取数据，它存储在变量中如何给出点击

2 个答案: