/    Sign up×
Community /Pin to ProfileBookmark

dropdown and javascript.

Copy linkTweet thisAlerts:
Jan 09.2009

Hi,

I am trying to create the following using html drop down and javascript.
Right now I have a drop down box with 10 options and on selecting that it shows some text. I am trying to give an option called ” Click here to see more options in the above drop down box” and when this is clicked, I would like to add 5more options to the existing drop down box. I am trying to kind of just display 10 at the first time and then show rest if they click on the link to add more.

Hope I am clear in explaining this.

regards
Pragan.

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@mikemJan 09.2009 — Hi Pragan, This may help...
[CODE]function addOptions()
{
var optionList=document.getElementById("menu");

for(var i=10; i<15; i++)
{
optionList.options[optionList.length] = new Option(i, i); [COLOR="Green"]// Parameters set text and value.[/COLOR]
}
}[/CODE] [code=html]<select id="menu">
<option value="0">0<option value="1">1<option value="2">2<option value="3">3
<option value="4">4<option value="5">5<option value="6">6<option value="7">7
<option value="8">8<option value="9">9
</select>
<button type="button" onclick="addOptions()">Add Options</button>[/code]
Mike ?
Copy linkTweet thisAlerts:
@praganauthorJan 09.2009 — Hi,

Thanks for the reply. It really helped me! This is what I was trying to do.

Can you please let me know a good source to refer for Javascript stuff?

thanks

pragan.
Copy linkTweet thisAlerts:
@praganauthorJan 14.2009 — hi,

I have got one more question.

Right now, I have a href link and when its clicked, it will add more options to the existing drop down menu. I would like to know if its possible to have this link inside the drop down menu itself and then when clicked just add options to that menu itself..Is this something possible to have a something in the drop down menu which when clicked gets added to the same drop down?

If this is possible, then how to do this? Also, after adding the extra options, I would want to highlight with different color for the new one's.

thanks in advance!

regards

Pragan
Copy linkTweet thisAlerts:
@mikemJan 14.2009 — Hi again, You can add a line to the previously supplied function to color the new items' background...
[CODE]function addOptions()
{
var optionList=document.getElementById("menu");

for(var i=10; i<15; i++ )
{
optionList.options[optionList.length] = new Option(i, i);
[COLOR="Red"]optionList.options[i].style.background="yellow";[/COLOR]
}
} [/CODE] But you cannot have a hyperlink as an option. You can best call the addOptions() function using the onchange attribute of the <select> element.

Mike ?
Copy linkTweet thisAlerts:
@praganauthorJan 20.2009 — Hi,

Thanks again for the reply. I got that working by using javascript(i am not good at it!) with help from online and my friend. This is what I did. Hope its useful for others.

[CODE]
<html>
<head>
<title>DropDown</title>
</head>
<body>

<select id="menu" onchange="choices(this.value)">
<option value="">Select...</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="more">More options...</option>
</select>

</body>

<script type="text/javascript" charset="utf-8">
function choices(options)
{
if (options == '') return;
if (options == 'more') {
addOptions();
return;
}
alert(options);
}

function addOptions()
{
var optionList=document.getElementById("menu");
optionList.options[0] = new Option("More options added...", "");
optionList.options[optionList.length - 1] = new Option("--------", "");
optionList.options[optionList.length] = new Option("5", "5");
optionList.options[optionList.length] = new Option("6", "6");
optionList.options[optionList.length] = new Option("7", "7");
optionList.options[optionList.length] = new Option("8", "8");
}

</script>
</body>
</html>

[/CODE]
×

Success!

Help @pragan 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.19,
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,
)...