retain dropdown selection on refresh [duplicate] - javascript

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
retaining selected dropdown option on postback
I have a dropdown when user selects the option, the value is passed on to the same url as querystring refreshing the page. after the page refreshes i wanna retain the selected value so user knows what was selected. How do i do this in jquery?
<select id="hospitalDropDown" onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option value="http://mysite.com/events/Pages/default1.aspx">All Hospitals</option>
<option value="http://mysite.com/events/Pages/default1.aspx?hos=Dyer">Dyer</option>
<option value="http://mysite.com/events/Pages/default1.aspx?hos=Carmel">Carmel</option>
</select>
Basically the logic is trap the selection in some variable and pass it as selected equals true but i am not being able to do it in jquery..I don't have acccess to server side code..either

For a clean method you can set a cookie
Take a look at the following question and the replies
jQuery cookies setting select drop down value after page refresh
*But my favorite is to set the selection in the user session using ajax method.

<select id="hospitalDropDown">
<option value="">All Hospitals</option>
<option value="Dyer">Dyer</option>
<option value="Carmel">Carmel</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('#hospitalDropDown').val('<?php echo $_GET['hos']; ?>');
$('#hospitalDropDown').change(function() {
location.href = 'http://mysite.com/events/Pages/default1.aspx?hos=' + $(this).val();
});
});
</script>

Related

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

Change the dropdown value as per page change

<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).

jQuery alert text in option from select tag [duplicate]

This question already has answers here:
Get selected text from a drop-down list (select box) using jQuery
(35 answers)
Closed 8 years ago.
I have a select code with two option. Is there a way I can use jQuery to alert me the text within the option tag of the option I have selected? Currently I have option two selected so when I use the code below it comes back as "5". I need it to come back as "Option 2".
alert (jQuery('#bw_status').val());
The code below is the example code I am using.
<select id="bw_status">
<option value="7">Option 1</option>
<option value="5">Option 2</option>
</select>
Yes, try this:
jQuery('#bw_status option:selected').text()

How to set the selected field of combo box within the view

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"]');
});

change image based on drop-down option [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery onchange/onfocus select box to display an image?
Looking to be able to change an image dynamically based on the selection option dropdown with an id of "main"
I came across this code which finds the text not the select value, which is exactly what I want. I just need to connect to the image.
alert( 'Text is: ' + $('#attribute119 :selected').text() );
The image is formatted like this
<img src="mainimage.jpg" id="main">
How would I dynamically change the image based on the option name selected when the form changes? My form looks something like this.
<form name="pds">
<select name="DropDownName" id="attribute119" >
<option value="0">Choose an option...</option>
<option value="2">blue</option>
<option value="3">green</option>
<option value="4">red</option>
</select>
</form>
The images will be named like this.
"1232_blue.jpg, 1232_red.jpg,etc.".
The color name is followed by the last "_" in the filename
This should do it:
$('#attribute119').change(function () {
$('#main').attr('src', '1232_' + $('#attribute119 :selected').text() + '.jpg');
});

Categories

Resources