Load a new page based on dropdown selection

Question

I have this HTML code where I have some links:

<select name="menu1" id="menu1">
  <option value="http://www.espn.com">ESPN</option>
  <option value="http://www.cnn.com">CNN</option>
  <option value="http://www.abcnews.com">ABC</option>
  <option value="http://www.cbsnews.com">CBS</option>
  <option value="http://www.foxnews.com">FOX</option>
</select>

and this JavaScript:

var urlmenu = document.getElementById( 'menu1' );
urlmenu.onchange = function() {
  window.open( this.options[ this.selectedIndex ].value );
};

I want the links to open on the same page, but they currently open in a new window. How can I get them to open on the same page?

Possible duplicate of [Open a URL in a new tab (and not a new window) using JavaScript](http://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-and-not-a-new-window-using-javascript) — jiaweizhang, Dec 02 '15 at 16:06
I made some changes to your post, trying to make the problem statement clearer. It's good to give information to help people answer, but try to make sure it's relevant and necessary for the question. Also you say open on the same page, do you mean the current tab or a new tab in the current window? What *exactly* you want isn't entirely clear, but the link above probably helps. — SuperBiasedMan, Dec 02 '15 at 16:16
@CodeiSir That seems to have been accidentally formatting when posting. They set up a link to ESPN, presumably misunderstanding the link options. — SuperBiasedMan, Dec 02 '15 at 16:17

Paul Roub · Answer 1 · 2015-12-07T15:29:15.947

open() always opens a new window (or a new tab, depending on your browser).

Instead, set the location of the current window:

urlmenu.onchange = function() {
  window.location.href = this.options.value;
};

(note that you no longer need to find the value via options[selectedIndex] - the value of the <select> element itself will do)

var urlmenu = document.getElementById('menu1');

urlmenu.onchange = function() {
  document.location.href = this.value;
};

<select name="menu1" id="menu1">
  <option>Choose:</option>
  <option value="http://www.espn.com">ESPN</option>
  <option value="http://www.cnn.com">CNN</option>
  <option value="http://www.abcnews.com">ABC</option>
  <option value="http://www.cbsnews.com">CBS</option>
  <option value="http://www.foxnews.com">FOX</option>
</select>

score 0 · Answer 2 · answered Dec 02 '15 at 15:59

You can use window.location = "http://www.example.com" to go to another link (info)

<script type="text/javascript">
var urlmenu = document.getElementById('menu1');
urlmenu.onchange = function () {
    window.location = this.options[this.selectedIndex].value;
};
</script>

DEMO:

<html>

<head>
</head>

<body>
  <select name="menu1" id="menu1">
    <option value="http://www.espn.com" [1]>ESPN</option>
    <option value="http://www.cnn.com">CNN</option>
    <option value="http://www.abcnews.com">ABC</option>
    <option value="http://www.cbsnews.com">CBS</option>
    <option value="http://www.foxnews.com">FOX</option>
  </select>
  <script type="text/javascript">
    var urlmenu = document.getElementById('menu1');
    urlmenu.onchange = function() {
      window.location = this.options[this.selectedIndex].value;
    };
  </script>
</body>

</html>

score 0 · Answer 3 · answered Dec 07 '15 at 15:40

0

According to w3: window.open() - open a new window; window.location.assign() method loads a new document.

So use window.location.assign(). Example

answered Dec 07 '15 at 15:40

Andrew

1,474
4
19
27

Load a new page based on dropdown selection

3 Answers3