Question

我正在尝试创建两个下拉框，这样当您从第一个选择一个值时，第二个将填充依赖于第一个的值。我从about.com获得了第一部分的代码，但无法弄清楚如何将第二个下拉列表链接到网页。

例如，我想将“首选 - 选项一”链接到google.com，将“首选 - 选项二”链接到yahoo.com。我在哪里包含代码中的链接？

以下是代码：

<form name="myform">
  <div align="center">
    <select name="optone" size="1" onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
      <option selected="selected" value=" "></option>
      <option value="1">First Choice</option>
      <option value="2">Second Choice</option>
      <option value="3">Third Choice</option>
    </select>

    <select name="opttwo" size="1">
      <option selected="selected" value=" ">Please select one of the options above first</option>
    </select>
  </div>
</form>

<script type="text/javascript">
function setOptions(chosen) {
  var selbox = document.myform.opttwo;
  selbox.options.length = 0;
  if (chosen == " ") {
    selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
  }
  if (chosen == "1") {
    selbox.options[selbox.options.length] = new
    Option('first choice - option one','oneone');
    selbox.options[selbox.options.length] = new
    Option('first choice - option two','onetwo');
  }
  if (chosen == "2") {
    selbox.options[selbox.options.length] = new
    Option('second choice - option one','twoone');
    selbox.options[selbox.options.length] = new
    Option('second choice - option two','twotwo');
  }
  if (chosen == "3") {
    selbox.options[selbox.options.length] = new
    Option('third choice - option one','threeone');
    selbox.options[selbox.options.length] = new
    Option('third choice - option two','threetwo');
  }
}
</script>

http://jsbin.com/iquyo5/57/

有人可以给我一个代码示例吗？非常感谢帮助，谢谢。

Answer 1

将逻辑绑定到$.change()事件。并从$.val()获取当前值确定用户想要重定向到的位置。

此示例假定某个位置直接存储在值本身中。

 $(".mySelect").change(function(e){
    window.location = $(this).val();
 });

Answer 2

使用此代码：

var selectEle = document.getElementsByName('opttwo')[0];
selectEle.onchange = function(){
  var val = selectEle.options[selectEle.selectedIndex].text;
  alert(val);
  switch(val) {
    case "first choice - option one":
      location.href="http://www.google.com";
      break;
    case "first choice - option two":
      location.href="http://www.google.com";
      break;
  }
};

Answer 3

试试这个..

function setOptions(chosen) {
  var selbox = document.myform.opttwo;

selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new 
Option('Please select one of the options above first',' ');

}
if (chosen == "1") {
    selbox.options[selbox.options.length] = new
Option('select one','');
  selbox.options[selbox.options.length] = new
  Option('first choice - option one','http://www.google.co.in');
  selbox.options[selbox.options.length] = new
  Option('first choice - option two','http://www.Yahoo.com');
}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new
Option('select one','');
  selbox.options[selbox.options.length] = new
Option('second choice - option one','twoone');
  selbox.options[selbox.options.length] = new
Option('second choice - option two','twotwo');
}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new
Option('select one','');
  selbox.options[selbox.options.length] = new
Option('third choice - option one','threeone');
  selbox.options[selbox.options.length] = new
Option('third choice - option two','threetwo');
}
}

2带链接的动态下拉菜单

3 个答案: