/    Sign up×
Community /Pin to ProfileBookmark

Enable and Disable ITEMS in a drop down Menu

Copy linkTweet thisAlerts:
Jul 15.2008

[CODE]<html>
<head>
<script type=”text/javascript”>
function makeDisable(){
var x=document.getElementById(“mySelect”)
x.Orange.disabled=true;
}
function makeEnable(){
var x=document.getElementById(“mySelect”)
x.Orange.disabled=false;
}
</script>
</head>

<body>
<form>
<select id=”mySelect” size = 4>
<option>Apple</option>
<option>Banana</option>
<option>Orange</option>
</select>
<input type=”button” onclick=”makeDisable()” value=”Disable list”>
<input type=”button” onclick=”makeEnable()” value=”Enable list”>
</form>
</body>

</html>[/CODE]

I want to be able to enable/disable items in a drop down menu on the Client Side. The code I provided does not work. I can enable/disable the entire Select box by removing the Instances of Orange in the Functions, but that is not what I want to do. Anyone have suggestions? thanks.

source:[URL=”http://www.codetoad.com/javascript/enable_disable_form_element.asp”]http://www.codetoad.com/javascript/enable_disable_form_element.asp[/URL]

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@FrankTheTankJul 15.2008 — I think you're addressing the option incorrectly in the select. Orange is the value of one of the options, but you can't refer to it that way. You can set an id value... try this:
[code=html]<select id="mySelect" size = 4>
<option id="Apple">Apple</option>
<option id="Banana">Banana</option>
<option id="Orange">Orange</option>
</select>[/code]

And try it again with the same script. Also, keep in mind that ids are case sensitive. I copied your option values verbatim, but you may want to use them in lowercase only. It's considered a better practice than what I did.

Frank
Copy linkTweet thisAlerts:
@tyeh26authorJul 15.2008 — [CODE]<html>
<head>
<script type="text/javascript">
function makeDisable(){
var x=document.getElementById("mySelect")
x.orange.disabled=true;
}
function makeEnable(){
var x=document.getElementById("mySelect")
x.orange.disabled=false;
}
</script>
</head>

<body>
<form>
<select id="mySelect" size = 4>
<option id="apple">Apple</option>
<option id="banana">Banana</option>
<option id="orange">Orange</option>
</select>
<input type="button" onclick="makeDisable()" value="Disable list">
<input type="button" onclick="makeEnable()" value="Enable list">
</form>
</body>

</html>[/CODE]

Lower case and with ID. did not work ? You can see what i tried pasted above. Any other suggestions? Is this possible? In the <option disabled></option> you cannot set it to disabled="false" and let it be enabled. So i am kind of skeptical if this is even possible.
Copy linkTweet thisAlerts:
@toicontienJul 15.2008 — Your SELECT actually should look like this:
[code=html]<select name="fruits" size="4">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Orange">Orange</option>
</select>[/code]
Use the value attribute for each OPTION. Now your script:
function disableByValue(sel, value) {
toggleByValue(sel, value, false);
}

function enableByValue(sel, value) {
toggleByValue(sel, value, true);
}

function toggleByValue(sel, value, disabled) {
var i = 0;
var option;

while (option = sel.options[i++]) {
if (option.value == value)
option.disabled = disabled;
}
And some amended HTML for your buttons:
[code=html]<input type="button" onclick="disableByValue(this.form.fruits, 'Orange')" value="Disable Orange">
<input type="button" onclick="enableByValue(this.form.fruits, 'Orange')" value="Enable Orange">[/code]

EDIT: Added the name attribute instead of the id attribute
Copy linkTweet thisAlerts:
@tyeh26authorJul 15.2008 — AHHHHH THANK YOU SO MUCH

Two problems with your code:

missing closing parenthesis for the while loop (did you even test your code before posting this?).

You mixed up your true and false, enable disables it and disable enables it. Both easy to fix issues. Thank You so much!
Copy linkTweet thisAlerts:
@toicontienJul 15.2008 — For [B]if[/B], [B]while[/B], and [B]for[/B] code blocks, and there is only one line of code following the opening of the block, you do not need the curly braces.

And sorry about the mixing up of the disabling. ? For some reason that always trips me up. The code should function just fine without the curly braces, though I have an extra curly brace in the toggleByValue function. Amended code is below:

function toggleByValue(sel, value, disabled) {
var i = 0;
var option;

while (option = sel.options[i++])
if (option.value == value)
option.disabled = disabled;
}
×

Success!

Help @tyeh26 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...