CODEWITHSUNDEEP
javascriptjqueryhtml
cbour
cbour

Reputation: 117

How to make onchange dropdown option-url to open in my page

   <html>
<head>
</head>
<body>
<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>
<script type="text/javascript">
 var urlmenu = document.getElementById( 'menu1' );
 urlmenu.onchange = function() {
      window.open( this.options[ this.selectedIndex ].value );
 };
</script>
</body>
</html>

I have this code and i want to open by click the selected in my page! not open another! thank you!

Upvotes: 8

Views: 33516

Answers (8)

Obaidul Haque
Obaidul Haque

Reputation: 950

Use no extra JavaScript code. Use only HTML select option with onchange attributes

Use this onchange attributes on your select option

onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);"

Complete Select option menu

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Select an Item</option>
<option value="Member.html">Member Report</option>
<option value="Account.html">Account Statement</option>
<option value="Employee.html">Employee Report</option>
<option value="Branch.html">Branch Report</option>
<option value="Area">Area Report</option>
<option value="Designation.html">Designation Report</option>

Hope it better solution for you!

Thanks

Upvotes: 0

Arun Kumar
Arun Kumar

Reputation: 1

<script>
function getValue(value){ 
var href = value; 
 if (href) window.open(href,"_self");
}
</script>
<select name="menu1" id="menu1" onchange="getValue(this.value);">
  <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>

Upvotes: -1

Merlin
Merlin

Reputation: 4917

Try changing this:

window.open( this.options[ this.selectedIndex ].value );

with this:

window .location.href = $("#menu1 option:selected").val();

Upvotes: -2

Rajnikant Kakadiya
Rajnikant Kakadiya

Reputation: 2265

Add second parameter _self

<html>
<head>
</head>
<body>
    <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>
    <script type="text/javascript">
     var urlmenu = document.getElementById( 'menu1' );
     urlmenu.onchange = function() {
          window.open( this.options[ this.selectedIndex ].value, '_self');
     };
    </script>
</body>
</html>

Upvotes: 3

Dhanu Gurung
Dhanu Gurung

Reputation: 8840

Use this : 

urlmenu.onchange = function() {
  window.open( this.options[ this.selectedIndex ].value, '_self');
};

window.open(URL,name,specs,replace): where name: 

_blank - URL is loaded into a new window. This is default
_parent - URL is loaded into the parent frame
_self - URL replaces the current page
_top - URL replaces any framesets that may be loaded
name - The name of the window (Note: the name does not specify the title of the new window)

DEMO Link

Upvotes: 11

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

var urlmenu = document.getElementById( 'menu1' );
urlmenu.onchange = function() {
  window.location.href(document.getElementById("menu1").value);
};

Change the window.open to window.location if you want to open the link in the current window. window.open opens the link in a new tab!

However, the jQuery code worked fine! 

var urlmenu = document.getElementById('menu1');
urlmenu.onchange = function() {
  window.location.href = $("#menu1 option:selected").val();
};

Upvotes: -1

PEIN
PEIN

Reputation: 308

One easy way to do it in javascript:

<html>
    <head>
        <script type="text/javascript">
        function handleChange() {
            var arr = document.getElementById( 'menu1' ) ;
            window.location = arr.value ;
        } 
        </script>
    </head>
    <body>
        <select name="menu1" id="menu1" onchange="handleChange()">
            <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>        
    </body>
</html>

Upvotes: 0

putvande
putvande

Reputation: 15213

The code you had before worked fine:

var urlmenu = document.getElementById('menu1');
urlmenu.onchange = function() {
    location.href = $("#menu1 option:selected").val();
};

Upvotes: 0

Related Questions