/    Sign up×
Community /Pin to ProfileBookmark

Expanding/Pulling Down Select list with Javascript

Copy linkTweet thisAlerts:
Jul 14.2005

Hi does anyone know if it is possible to expand/pull down a Select box visually using Javascript?

I’ve written some codes that can read the input from a text box and select the matching or closest match to an option’s inner text in the select drop down box. Very much like a search function for a select drop down box.

I need to refine it further so that the select box can drop down when the user enters something in the textbox

Regards

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@Jonny_LangJul 14.2005 — [CODE]<HTML>
<Head>
<Script Language=JavaScript>

var smartOptions = new Array();

var allOptions = new Array();
allOptions[0] = "Babich, Timothy";
allOptions[1] = "Cahoon, Ron";
allOptions[2] = "Atwood, James";
allOptions[3] = "Cannon, Edith";
allOptions[4] = "Allen, Mike";
allOptions[5] = "Bailey, Mary";
allOptions[6] = "Aaron, Daniel";
allOptions[7] = "Alexander, Allison";
allOptions[8] = "Baker, George";
allOptions[9] = "Conner, Anthony";

function buildSmartOptions(isForm){

matchStr = isForm.isText.value.toLowerCase();
if (matchStr != "")
{
smartOptions.length = 0;
n = 0;
endClip = matchStr.length;
for (i=0; i<allOptions.length; i++)
{
if (matchStr == allOptions[i].slice(0,endClip).toLowerCase())
{smartOptions[n++] = allOptions[i]}
}
isForm.isList.length = 1;
for (i=0; i<smartOptions.length; i++)
{
isData = new Option(smartOptions[i],smartOptions[i]);
isForm.isList.add(isData,isForm.isList.options.length);
}
if (smartOptions.length > 5){isForm.isList.size=6}
else {isForm.isList.size = smartOptions.length+1}
}
if (matchStr == ""){init()}
}

function getChoice(isChoice){

alert(isChoice);
}

function init(){

isForm = document.forms.Form1;
isForm.isList.length = 1;
isForm.isList.size = 1;
allOptions.sort();
for (i=0; i<allOptions.length; i++)
{
isData = new Option(allOptions[i],allOptions[i]);
isForm.isList.add(isData,isForm.isList.options.length);
}
isForm.isText.focus();
}

window.onload=init;

</Script>
</Head>
<Body>
<Form name='Form1'>
<Table align='center' cellspacing='0' cellpadding='2' style='border:solid black 1px;font-family:Arial;font-weight:bold;font-size:12pt;width:200px;height:110px;background-color:lightyellow'>
<THead>
<TR><TH colspan='2' height='25' bgcolor='lightblue'>Name List</TH></TR>
</THead>
<TBody>
<TR>
<TD align='right' style='font-size:11pt'>Trim At:</TD>
<TD><input type='text' name='isText' size='15' onkeyup="buildSmartOptions(this.form)"></TD>
</TR>
<TR>
<TD align='center' colspan='2'>
<Select name='isList' onchange="getChoice(this.value)" style='width:151px'>
<option selected value='null'>Make a Selection</option>
</Select>
</TD>
</TR>
</TBody>
</Table>
</Form>
</Body>
</HTML>[/CODE]
Copy linkTweet thisAlerts:
@KorJul 14.2005 — AFAIK there is no straight method to expand/colapse a combo, but you may use a trick, by transforming the menu-combo in a list-combo back and forth:
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function expC(){
var obj = document.getElementById('bla');
var h = obj.options.length;
obj.getAttribute('size')?obj.removeAttribute('size'):obj.setAttribute('size',h);
}
</script>
</head>
<body>
<a href="#" onclick="expC()">expand/colapse</a> <br>
<br>
<select id="bla">
<option>0 sdg</option>
<option>1 dfgsg</option>
<option>2 gffg</option>
<option> 3 fgfgfgf</option>
</select>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@KorJul 14.2005 — Furthermore, to use an input text as a "seach" whithin the combo, you may use something like:
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function expC(v){
var obj = document.getElementById('bla');
var o = obj.options;
obj.setAttribute('size',o.length);
for(i=0;i<o.length;i++){
if(o[i].text.indexOf(v)==0&&v!=''){
o[i].selected=true;break
}
else{o[i].selected=false}
}
}
</script>
</head>
<body>
<input type="text" onkeyup="expC(this.value)">
<br>
<select id="bla">
<option>abcd</option>
<option>abxzx</option>
<option>baba</option>
<option>bbab</option>
</select>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@gummirauthorJul 14.2005 — Thanks everyone! The solutions offered really helped alot =]
×

Success!

Help @gummir 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.28,
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,
)...