Dropdown option menu with javascript - javascript

I have created a website with javascript dropdown option menu.
This is my menu.php file
<select onchange="if (this.value) window.location.href=this.value">
<option value="/home.php">Home</option>
<option value="/aboutme.php">About Me</option>
<option value="/work.php">Work</option>
<option value="/contect.php">Contect Me</option>
</select>
I have included this file on every pages of website.
It works fine.
Now what I want is : When I click on the aboutMe from dropdown menu in "home" It should redirect me to About Me page and dropdown menu in aboutme page should remain at about me. So far it is redirecting successfully, but dropdown menu always remains on "Home".
Is there a way to solve this ? or Should I create a saparate file for each pages?
I am confused. Please Help.

Give your select an id:
<select id="page" onchange="if (this.value) window.location.href=this.value">
and use the script:
<script>
window.onload = function(){
document.getElementById('page').value = window.location.href;
}
</script>

Related

Is there any way I can navigate to a link using options in html using JavaScript?

I created a list of options using html and placed a button beneath it...I want the user to select an option and when he clicks on the button,it redirects him to a different page...
Is there anyway that I can do this using JavaScript please?
Yes, window.location.href = "/someLocation" just is made for you.
when you click in the button you can call a function and inside of this function you put
window.location.href = "your-url"
or you can use window.open("your-url") to open a new tab.
<select onChange="goToPage(value)">
<option disabled selected value> -- select an option -- </option>
<option value="https://google.com" > google </option>
<option value="https://stackoverflow.com" > stackOverflw </option>
<option value="https://github.com" > git </option>
</select>
<script>
function goToPage(value) {
window.location.href = value
}
</script>
you an see more in this
link here

fancybox popup execute select option

I have a json file exciting an array of images. I have fancy box install and when you click the image an inline div will appear. With in the inline div I display the image and in have a dropdown box to display options for selecting. I idea is to select an option then go to the corresponding page. I can get this to work with links but I want it to use a dropdown feature. No function will execute within the fancy box window.
function fruitselect() {
var e = document.getElementById("mySelect");
var strUser = e.options[e.selectedIndex].value;
alert(strUser);
};
<form>
Select your favorite fruit:
<select id="mySelect" onchange="fruitselect()">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
</form>
Is there a way to do this?
It is very hard to understand your comment and I do not see any issue with your code: http://codepen.io/anon/pen/pPpVxe?editors=1010
Also, you can disable "touch" feature if it is causing some trouble:
<a data-fancybox data-options='{"src": "#content", "touch": false}' href="javascript:;">
Open demo
</a>

Making selected option default option of dropdown when move to another page

I have created a mobile menu on my site with the html below:
<select id="mobile-select" name="mobile-select" onchange="if (this.value) window.location.href=this.value">
<option class="mobile-select-label" value>Navigation</option>
<option class="mobile-select-label" value="http://www.themathsproject.co.uk/home">Home</option>
<option class="mobile-select-label" value="http://www.themathsproject.co.uk/projects/all">Projects</option>
<option class="mobile-select-label" value="http://www.themathsproject.co.uk/tutoring">Tutoring</option>
<option class="mobile-select-label" value="http://www.themathsproject.co.uk/contact">Contact</option>
</select>
When the selects an option on the dropdown, they're sent to the appropriate page. When on that new page, I want the default option (shown on the dropdown) to correspond to the new page.
E.g. if the user had clicked Tutoring, the page would reload to the Tutoring page. Once on the Tutoring page, I want the dropdown to show "Tutoring" by default.
Note how if the user clicks "Projects", they're sent to "../projects/all" instead of just "/projects".
I have tried to implement several other techniques (found on very similar stack exchange questions) but couldn't get any to work.
Note: The onchange attribute is responsible for directing the user to the appropriate page after a selection has been made.
Any help would be greatly appreciated,
Jack
1)you can use query string
2)or you can also do it by browser local storage
3)or cookie
You can use the following code
$current_url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'];
<option class="mobile-select-label" <?php echo ($current_url == 'http://www.themathsproject.co.uk/tutoring' ? 'selected' : '') ?> value="http://www.themathsproject.co.uk/tutoring">Tutoring</option>
same as do for others link

Creating php template popup with jquery select menu

I wanted to create a php template popup will appear on a small window by clicking jquery select menu.
For that reason I used select menu:
<div class="form-group">
<select id="lunchBegins" class="selectpicker" data-live-search="true" data-live-search-style="begins" title="Select a Popup" onchange="javascript:handleSelect(this)">
<option value="first_popup" value="1">Popup A</option>
<option value="second_popup">Popup B</option>
</select>
and javascript:
function handleSelect(elm)
{
window.location = elm.value+".php";
}
But it doesn't create a popup.it redirects me to the php file.Also I want that when it will open a popup, .php extension will be hidden.
Can you help me in this case.
Window.locations redirects you
Therefore you should use jquery .load method or ajax for loading your php file :)

jquery mobile multipage dropdown not displaying selected value

I have written my first jquery mobile site using their multipage template.
In my application, Changes in the main page can affect the selected value in a drop down in a sub page. The first time I go to the sub page, the correct option is selected and displayed. After that, when I go to the sub page, the correct option is selected (ticked), but the wrong option is displayed.
I created a jsfiddle to demonstrate this... http://jsfiddle.net/afePj/2/
page one lets you select an option...
<select name="selectname1" id="selectid1" onChange="changePageTwo()">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
...and sets the selected value on page two to match...
function changePageTwo() {
select1 = document.getElementById('selectid1');
select2 = document.getElementById('selectid2');
select2.selectedIndex = select1.selectedIndex;
}
...when you arrive on page two I would like the selected value to be displayed. But after the page has been displayed once, the option it shows never changes...
<select name="selectname2" id="selectid2">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
Any ideas about how I can make the sub page display the selected value?
Thanks
When you update a select menu in jQuery Mobile you need to call the select menu widget's refresh menu so that the display is updated to match the native elements
For example
$('selectid2').selectmenu('refresh');
http://jsfiddle.net/afePj/4/

Categories

Resources