Lock down a drop down menu after selection?

Is there a way to lock down a drop down menu once the user has selected a value? In other words, put it into a read only after a selection has been made from the menu.
LVL 3
danomaticAsked:
Who is Participating?
 
glcumminsCommented:
I do not know a way to lock the select. You can use Javascript to store the previous selection, and always change it back during an onchange event.

Another method is to simply hide the select after it has been updated. You can show the contents of the selection in another field (perhaps a span so it will not be submitted with your form). The value of the select will still be submitted properly, even though it is hidden. We will simply use a CSS "display: none" to hide the select:

<html>
<head>
<script type="text/javascript" language="Javascript">

function updateMySelect()
{
      targetLocation = document.getElementById("mySelectValue");

      sourceLocation = document.getElementById("mySelect");

      if (sourceLocation.selectedIndex != 0)
      {
            targetLocation.innerHTML = sourceLocation[sourceLocation.selectedIndex].innerHTML;

            sourceLocation.className = "hidden";
      }

}

</script>
<style type="text/css">
select.hidden
{
      display: none;
}
</style>
</head>
<body>
<form>
<select id="mySelect" onchange="javascript:updateMySelect()">
      <option selected="selected">Select One</option>
      <option value="1">Option One</option>
      <option value="2">Option Two</option>
      <option value="3">Option Three</option>
</select>
<span id="mySelectValue"></span>
</form>
</body>
</html>
0
 
trifecta2kCommented:
You can disable the dropdown after selection.  You can use an onChange="updateFields()"

function updateFields(){
      document.getElementById('selStatus').disabled = true;
}

That will not allow the user to change it again.  
0
 
glcumminsCommented:
Correct me if I am wrong, but doesn't disabling a form object make it inaccessible after the form is submitted?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
trifecta2kCommented:
You're right!  Sorry about that, to use my solution you would have to enable the field before submitting.  
0
 
BadotzCommented:
>>enable the field before submitting

Or save the id/value in a hidden <INPUT>, perhaps?
0
 
BadotzCommented:
Or better yet, submit the values using Ajax?
0
 
nplibCommented:
<script language="javascript">
function disableDropdown() {
       document.bob.mySelect.disabled = true;
}
</script>

<form name="bob">
<select id="mySelect" onchange="javascript:disableDropdown()">
      <option selected="selected">Select One</option>
      <option value="1">Option One</option>
      <option value="2">Option Two</option>
      <option value="3">Option Three</option>
</select>
</form>
0
 
BadotzCommented:
The trouble with disabling is remembering to enable afterwards.
The trouble with enabling is remembering to disable before submitting.
0
 
danomaticAuthor Commented:
ok, we will take a look at this. yes, and enabled is crucial because it submits a year to the database.
0
 
nplibCommented:
then have a hidden field like this
<script language="javascript">
function disableDropdown() {
       document.bob.year.value = document.bob.mySelect.value;
       document.bob.mySelect.disabled = true;
}
</script>
 
<form name="bob">
<input type="hidden" name="year" value="" />
<select id="mySelect" onchange="javascript:disableDropdown()">
      <option selected="selected">Select One</option>
      <option value="1">Option One</option>
      <option value="2">Option Two</option>
      <option value="3">Option Three</option>
</select>
</form>

Open in new window

0
 
nplibCommented:
Yes it was an objection I guess, I was just trying to give the author another possible solution since my previous post left the drop down disabled, after thinking about it would leave it useless, since once it's disabled it no longer sends the value.

So my other option sets the value of the drop down to a hidden field, disables the dropdown, so when submitted the chosen value will be passed to the processing page.
0
 
b0lsc0ttIT ManagerCommented:
nplib,

Thanks for your participation here but I will leave my recommendation the same.  Your post at http:#20441953 can't be considered for cleanup.  Your first post http:#20059379 used code from one expert and the suggestion of another.  If credit had been given to the experts then things may be different since you did provide an example of what Badotz suggested.

The points you just mentioned in your post are good too but were pointed out by Glcummins earlier and were posted after the cleanup post.  The solution actually ends up being one suggested by the other experts above.

Thanks for your participation here though and your contribution to this site.  Keep up the good work and don't forget to read the previous posts and provide credit when you use something from another expert.  I hope this explanation helps but feel free to post your own recommendation of how this should be closed (not another solution but a recommendation of how to close this with the comments above my cleanup post).  The moderator who closes this will view your recommendation when he finalizes this.  Let me know if you have a question about anything I said.

b0lsc0tt
EE Cleanup Volunteer
0
 
Computer101Commented:
Forced accept.

Computer101
EE Admin
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.