Hi All,
I am making a simple web app that has drop down list in the first page in a form tags.
Now wen I change the value in the dropdown the form is submitted. On the onchange I have made call to create a query string custom JS function of the selected Index.
Now I want the drop down list to maintain its state; keep the last selected value selected after submission.
Friends how can I do this?
Thank You All.
views:
474answers:
4
+1
A:
You add the selected attribute with any (e.g. blank) value to the you want to keep selected.
Thom Smith
2009-10-16 07:08:57
the HTML way is to just have the attribute with no value, eg: `<option selected>blah</option>`, the XHTML way is like this: `<option selected="selected">blah</option>`
nickf
2009-10-18 14:52:22
A:
Depends on how your page is dealt with after submission, if it goes to a PHP/Perl or whatever language to rebuild the page, then put the drop down options into a script and loop through them.
Something like this is pretty common place
for($i = 0; $i < 10; $i++){
echo "<option value='{$i}' ";
($i == $_POST['dropdownname'])? echo "selected='selected'":"";
echo ">{$i}</option>";
}
Psytronic
2009-10-16 07:58:14
A:
You could pass a hidden form variable to the next posted page. Using a simple Javascript function that loops through the options of the selection drop-down list, if any of the options match the hidden value, then set its selected sttribute.
Loadmaster
2009-10-16 16:14:13
+1
A:
The getQueryValue function is a bit unoptimized and would probably be better accomplished with a regular expression match to get the value, but I just typed it out like this so you could see what it was doing.
<html>
<head>
<script type="text/javascript">
function setSelections()
{
document.myForm.mySelect.value = getQueryValue("mySelect");
};
function getQueryValue(key)
{
var queryString = window.location.search.substring(1);
var queryParams = queryString.split("&");
for(var i = 0; i < queryParams.length; i++)
{
if(queryParams[i].indexOf("=") > 0)
{
var keyValue = queryParams[i].split("=");
if(keyValue[0] == key)
{
return keyValue[1];
}
}
}
return null;
}
</script>
</head>
<body onload="setSelections();">
<form name="myForm" action="" method="get">
<select id="mySelect" name="mySelect" onchange="document.myForm.submit();">
<option value="Opt1">Option 1</option>
<option value="Opt2">Option 2</option>
<option value="Opt3">Option 3</option>
<option value="Opt4">Option 4</option>
</select>
</form>
</body>
</html>
WesleyJohnson
2009-10-18 14:49:09
Thank you so much, Wesley!! :)The solution worked. However the problem still lingers if I am using any server-side language like ASP.NET; I am trying to find out the solution if you come up with one then do drop the solution. I am using ASP.NET MVC.Thank You again.
socialCircus
2009-10-20 08:45:26
Ah, I'm unfortunately not familiar with ASP.NET MVC. I know that it doesn't use ViewState to persist control states from request to request like ASP.NET does, however.Because I'm not familiar with it, it's hard to answer that - but I would assume that on postback, you can read the value of mySelect by checking - Request.QueryString["mySelect"] - which should have the value of whichever option was selected. It would then a be a matter of forcing the SelectedIndex property of the dropdown based on said value.I really need to dig into MVC one of these days. :)
WesleyJohnson
2009-10-20 17:02:00