Select box persists with value - javascript

I am having a JSP page which includes another JSP which has all the common customized popup boxes. On my main JSP page I have a button that says "Cancel". when I press this the Javascript is invoking a div which is present in the JSP file which I have included.
The invoked pop up has a div and in it there is a dropdown box. The user can select the reason from the dropdown box. Now if the user closes the pop-up box and clicks the Cancel button again, the dropdown box persists the value that was selected earlier.
I want to make the value to go to default. If I refresh the page the value is removed. I tried to refresh the page but then it gives an alert to confirm the submission, which doesn't look good in the terms of user experience.
I am using Struts 2.
How can I do this?

I found the solution for the problem. Posting here for others.
My html code
<select name="cancel.cancelReasonCode"
id="selectCancellationReason"
data-theme="c"
data-mini="true"
data-native-menu="false"
tabindex="-1">
<option value="0">Select Cancellation Reason</option>
<option value="3">Created by mistake</option>
<option value="2">Incorrect Id</option>
<option value="1">Data not available</option>
</select>
Javascript code
var myselect = $("select#selectCancellationReason");
myselect[0].selectedIndex = 0;
myselect.selectmenu("refresh");
I am using jquery and jquery mobile in my application.

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

With use of change() and show(), drop down list selection is not shown on android chrome

On the selecting a value from a drop down list, I wan't another hidden element to show up.
I'm using the following code:
$('#ddd').change(function() {
$("#divoption237").show(300);
});
<div id="option236" class="option">
<select id="ddd" value="236" name="option[236]">
<option value=""> --- Selecteer --- </option>
<option data-id="49" value="40">Hond</option>
<option data-id="50" value="41">Kat</option>
</select>
</div>
This all works fine in firefox, chrome and IE on my desktop. However I've run into some weird problem on my android phone in chrome. Whenever I select a value, for example Hond, it won't show up as being picked. So the user will still see -- Selecteer -- on his/her screen. The value is selected however and will be send if the form is sent. If I change show(300) to show(), the value is shown to the user. I'd like to use the animation though. Does anyone have a solution to this problem?

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/

Two dropdowns and a submit button

I have two dropdowns with different values in each and have an submit button in last..
Now what i want to do is that, when i select an option form first dropdown and then another option from the second dropdown. Now when i click on submit button it would show there related value popup window having close button in it.
Code is as follows :
Calling from :
<select>
<option>America</option>
<option>India</option>
</select>
Calling To :
<select>
<option>England</option>
<option>France</option>
</select>
<input type="submit" name="" value="" />
These four countries have four different rates..
When i select calling from America to England than it ll show a popup window of its rates.
And when i select calling from America to France than it ll show a pop window of its own rates ..
Thanks in advance if u can help me .. :)
Guessing you just want the selected values or something?
First give the dropdowns a name and/or id.
lets make it simple and just make it a button instead of a submit.
<select id="list1">
<option>USA</option>
<option>India</option>
</select>
<select id="list2">
<option>UK</option>
<option>Fr</option>
</select>
<input type="button" value="Click here" onClick="showAlert();">
<script language="javascript" type="text/javascript">
function showAlert() {
alert('Just get the values in here by ID.selectedItem.text I believe it is');
}
</script>
I believe that is basicly what you are after.
P.s.What exactly do you mean with rates?
In that case take what Mithin Sasidharan wrote and instead of the links he used just use a page you made and then put the info on that page that you have.
You can also just make a link and style it with CSS to make it look like a button.
If you did that you can simply use
This will make the link open a new window with the page you pointed towards.
check this out.
http://jsfiddle.net/NFq2f/2/

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

Categories

Resources