0

I had created a dropdown for some pages in index page, After selecting the a page from dropdown the page will redirect to the respective page. below is the code:

i. Index.html

<script>
function DropList() {
var n = document.getElementById("sel").options.length;
document.getElementById("sel").size = n;
}

function handleSelect(elm){
window.location = elm.value;
}
</script>
<script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
  </script>
<div>
    <select id="sel" onchange="javascript:handleSelect(this)">            
<option value="page1.html/">page1</option>
<option value="page2.html/">page2</option>
<option value="page3.html/">page3</option>
<option value="page4.html/">page4</option>
</select>
</div>

Now after selecting the page1 from the dropdown the page will redirect to page1.html, where i have given the same drop down code as below:

ii.Page1.html

<div>
    <select id="sel" onchange="javascript:handleSelect(this)">            
<option value="page1.html/">page1</option>
<option value="page2.html/">page2</option>
<option value="page3.html/">page3</option>
<option value="page4.html/">page4</option>
</select>
</div>

I want to to show the page1 option from the dropdown to be active(default selected in the dropdown) in page1.html page. since it gets redirected after selecting the page1 from the index page.Kindly help me how can i put the page as active.

Shaik
  • 286
  • 2
  • 15
  • 36

3 Answers3

0

In fact you can't pass javascript variables across pages. But you can do it by "cheating" with the url.

Your options have as value the end of the url which is window.location.pathname.

With it, you can find and select the right option.

var page = window.location.pathname;
var select = document.getElementById('sel');

var opts = sel.options;
for (var opt, j = 0; opt = opts[j]; j++) {
    if (opt.value == val) {
      sel.selectedIndex = j;
      break;
    }
}

This is untested code and I used this question for the selection part. But I hope I give you a clue.

Julien Bourdic
  • 1,398
  • 1
  • 12
  • 29
0

check this once.. get the url of current page, then split it and get the page*.html.. set it as select element value

var pageURLArray = $(location).attr("href").split("/");
var pageURL = pageURLArray[pageURLArray.length-2]+'/';
alert(pageURL);
$('#sel').val(pageURL);

function DropList() {
var n = document.getElementById("sel").options.length;
document.getElementById("sel").size = n;
}

function handleSelect(elm){
window.location = elm.value;
}
<script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
  </script>
<div>
    <select id="sel" onchange="javascript:handleSelect(this)">            
<option value="page1.html/">page1</option>
<option value="page2.html/">page2</option>
<option value="page3.html/">page3</option>
<option value="page4.html/">page4</option>
</select>
</div>
Sree
  • 374
  • 2
  • 10
  • oh.. let me know what you are getting in popup alert? – Sree May 29 '18 at 08:57
  • i want the drop-down to be in two pages and after selecting the dropdown option in one page the dropdown need to show active in redirecting page – Shaik May 29 '18 at 09:08
  • the javascript code what I have provided in the answer should be in redirecting page.. Then, this will get the redirecting page URL and set it as value for dropdown list.. – Sree May 29 '18 at 09:11
0

Actually you can pass js variables through pages. Either with sessionStorage or localStorage You can try using sessionStorage.setItem('key', 'value') where as key you will set ID or class of dropdown and value as true/false based on whether dropdown should be active. Then once you load page you can just check if the dropdown should be opened with sessionStorage.getItem('key') and just add class for active state

phill
  • 3
  • 4