switch statement with Redirect_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-15 10:28 出处：网络

Ok here\'s the deal, I\'m trying to have a switch statement redirect to another page depending on what option is selected in a select box.Below is a sample i\'m working with and trying to figure out,

相关专题：javascript

Ok here's the deal, I'm trying to have a switch statement redirect to another page depending on what option is selected in a select box. Below is a sample i'm working with and trying to figure out, any help at all would be greatly apreciated.

    <html>
<body>
<form name="form1">
<select name="select1">
<option value="p1">p1</option>
<option value="p2">p2</optino>
</select>
</form>


<script type="开发者_StackOverflow中文版text/javascript">
<!--
var sel = document.form1.select1;
var txt = sel.options[sel.selectedIndex].text;
var opt = sel.options[sel.selectedIndex].value;

switch (sel)
{
  case 'p1': window.location = 'http://www.yahoo.com'
            break;
  case 'p2': window.location = 'http://www.google..com'
            break;
}



</script>

<p>Set the variable to different value and then try...</p>
</body>
</html>

I recommend you avoid switch-statements. How about this?

<select name="select1">
  <option data-url="http://www.yahoo.com" value="p1">p1</option>
  <option data-url="http://www.google.com" value="p2">p2</option>
</select>

And:

document.getElementById("select1").onchange = function () {
    var url = this.options[this.selectedIndex].getAttribute("data-url");
    window.location = url;
};

Edit: I changed the example to use html 5 data attributes (not to worry, they are 100% supported in all browsers), since you need the value attribute for something else.

You need to bind an event handler
Your switch was using the wrong value

See http://www.jsfiddle.net/vDFpZ/

<html>
<body>
<form name="form1">
<select name="select1">
<option value="p1">p1</option>
<option value="p2">p2</option>
</select>
</form>


<script type="text/javascript">
    window.onload = function () {
        document.getElementsByName("select1")[0].onchange = function () {
            var sel = this.options[this.selectedIndex];
            var text = sel.text;
            var val = sel.value;

            switch (val)
            {
              case 'p1': window.location = 'http://www.yahoo.com'
                        break;
              case 'p2': window.location = 'http://www.google..com'
                        break;
            }
        }
    }
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>

i noticed that you did not bind an change handler to the select, so when the user selects a value nothing happens.

You've got some typos, your second "/option" and your "google.com". And the switch statement has nothing to do with your error. You have no event listener/onchange handler and you aren't switching with the value from the select option

https://developer.mozilla.org/en/DOM/element.onchange https://developer.mozilla.org/en/DOM/element.addEventListener