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
Related
We have a HTML formular with different data. Name, E-Mail and a dropdown.
Method is POST and the form data is submitted via PHP.
Also a "thank-you" site is configurated. Works well.
Now we need for each selected dropdown a different landing-page redirect.
Lets say the dropdown contains "yellow", "black" and "green".
Onclick Submit should send the data and redirect to the correct thank-you site (html site).
thanks-for-purchasing-green-color.html
thanks-for-purchasing-black-color.html
thanks-for-purchasing-yellow-color.html
is there a simple method? we are open also or non-php solutions.
i hope it's clear what we are looking for.
best regards
you can add the color as a value in every option
<select name="color">
<option value="green">Green</option>
<option value="black">Black</option>
<option value="yellow">Yellow</option>
</select>
after that when you receive it in your backend you will make redirect depending on the value of your select value by concatenating the color with the full age name
$page = "thanks-for-purchasing-".$_POST['color']."-color.html"
header('location:'.$page);
Ok I have a page name "my_file.html" with the code,
<script> //Beahvior on change
jQuery("#selectBox").change(function() {
document.getElementById("selectBox").value =$( "#selectBox).val();
location = $("#selectBox option:selected").val();
});
</script>
<!--A select html tag -->
<div class="block2">
<select id="selectBox">
<option value="check.html">Check.html</option>
<option value="going.html">Going.html</option>
<option value="check123.html">Check123.html </option>
</select>
</div>
Now this page(my_file.html) is loaded externally into the three files "check.html" ,"going.html" and "check123.html" with Jquery.Ok now I manually type the directory of "check.html" and the page is loaded,when selecting "going.html" from the option list the page going.html is loaded with the 'my_file.html' content but the option 'value="going.html"'is not mark as selected.The option list simply shows "check.html" as the selected option.This same behavior happens on selecting 'check123.html' option too.I also cannot load the 'check.html' page because it is already set as selected.
I have been trying to figure out the solution of this problem but to no avail,any help would be good.
If you want to know what I want to achieve go to this link http://readcomiconline.to/Comic/The-Walking-Dead/Issue-1?id=1715
Below the navigation bar you will see the "Issue" select option tag and when you choose any chapter from the drop down list,that issue is loaded and also the selected 'Issue' is set as selected.
Maybe the selectedIndex would do what you want:
document.getElementById("selectBox").selectedIndex = 2;
This way you can control what option is selected.
that site seems use "get" to achieve that,
in the top of my_file.html
<?php
$selectedCheck = $_GET['selected'];
?>
and in your div
<div class="block2">
<select id="selectBox">
<option value="check.html" <?php echo (($selectedCheck == 'check.html') ? 'selected':'');?>Check.html</option>
<option value="going.html" <?php echo (($selectedCheck == 'going.html') ? 'selected':'');?>>Going.html</option>
<option value="check123.html" <?php echo (($selectedCheck == 'check123.html') ? 'selected':'');?>>Check123.html </option>
</select>
</div>
it maybe not a smart way but it work and pretty easy to use :)
or maybe just add a default option like "Please choose one" and set it as selected, then whatever u selected the select will mark "Please choose one" selected.
<select id="location-search" onChange="window.location.href=this.options[this.selectedIndex].value;"> >
<option value="http://dignitytech.com/efront/contact-us/">Ireland</option>
<option value="http://dignitytech.com/efront/united-kingdom-2/">United Kingdom</option>
<option value="http://dignitytech.com/efront/spain/">Spain</option>
<option value="http://dignitytech.com/efront/romania/">Romania</option>
</select>
Now i want to change the dropdown value as per page change.
Anybody help me
You should be able to achieve this with this simple line of code executed on page load:
$('#location-search').val(location.href);
Based on what you already have, I'm assuming that you have exactly that select on multiple pages. If so, then simply on each page mark appropriate value (so when you're on contact-us, mark that option with selected attribute).
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/
I have two options in a combo box.
<select id="selLang">
<option value="/en" >english</option>
<option value="/fr" >french</option>
</select>
When i choose the second option the page is refreshed and the selected option isn't displayed in the top of the combo box (i mean, as the selected item.)
I want to set the selected option to be the selected option which is in the top of the combo box- within the view.
so my question is just how can i do it? or maybe i have to create a cookie? and if so -how do i do t-h-a-t?
Perhaps it's a silly question, but i'm quite new in this region.
Thanks in advance!
you need to set the selected attribute of the option. you can do it as follows:
<select id="selLang">
<option value="en" >english</option>
<option value="fr" selected="selected" >french</option>
</select>
Hope this is what you wanted..
see this
I'd recommend you taking a look at the ASP.NET MVC localization guide which will provide you with some nice ideas about how to implement this.
First, why when you choose the second option, the page is refreshed. Do you have any JavaScript function in action to post your form.
I ask that, because HTML <select> tag's change won't initiate an HTTP Post request. So, please update an explanation for that.
However, let's go back to your question. You can try this:
<select id='selLang' name='selLang'>
<option value="/en" >english</option>
<option value="/fr" >french</option>
</select>
This will cause the <select> tag to become a successful control during a POST request. This means that you can use this to create a script like:
$(function(){
$('#selLang').val('#HttpContext.Request["selLang"]');
});