Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

how to dynamically reduce dropdown list items?

Status
Not open for further replies.
longmatch

longmatch

Programmer
Nov 1, 2001
406
I have a drop down list generated from backend databse. The list is used for user's selection. The business rule is that each item can only be selected once. I would like to delete the items user selected from the list. How can I dynamically do this?
For example, I have a drop down list, which have four items, dog, cat, fish, and chicken. After user selects dog, there will be only cat, fish, and chicken left in the list.

Is this doable? how?

Thanks


Longmatch
 
Sort by date Sort by votes
yes you can do it. How you want to do it is dependent on your database use model and yoru View / Controler design and logic. You have not provided that information.

-pete
 
Upvote 0 Downvote
yes you can do it via Java Script

you need write js function to be fired on item been selected and then you can remove your selected item like this:

document.YOUR_FORM_NAME.YOUR_FIELD_NAME.options = null;

where i is the index of the item you want to remove ... if you don't know index you can sycle over all items in you select and when you'll find matching item remove it

somthing along these lines:

max = document.YOUR_FORM_NAME.YOUR_FIELD_NAME.options.length;

for(i=0;i<max; i++)
{
if(document.YOUR_FORM_NAME.YOUR_FIELD_NAME.options.value == 'YOUR_VALUE')
{
document.YOUR_FORM_NAME.YOUR_FIELD_NAME.options = null;
break;
}
}
 
Upvote 0 Downvote
ops it should be:

max = document.YOUR_FORM_NAME.YOUR_FIELD_NAME.options.length;

for(i=0;i<max; i++)
{
if(document.YOUR_FORM_NAME.YOUR_FIELD_NAME.options.value == 'YOUR_VALUE')
{
document.YOUR_FORM_NAME.YOUR_FIELD_NAME.options = null;
break;
}
}
 
Upvote 0 Downvote
xmm it didn't work again sorry ... I'll try again it must be document.YOUR_FORM_NAME.YOUR_FIELD_NAME.options[ i ] = null

********************************************

max = document.YOUR_FORM_NAME.YOUR_FIELD_NAME.options.length;

for(i=0;i<max; i++)
{
if(document.YOUR_FORM_NAME.YOUR_FIELD_NAME.options.value == 'YOUR_VALUE')
{
document.YOUR_FORM_NAME.YOUR_FIELD_NAME.options[ i ] = null;
break;
}
}
 
Upvote 0 Downvote
sergeiY: hit the little Process TGML link above the &quot;Submit Post&quot; button. It will give you links to TGML tags like the code tag that will allow you to post code without it trying to italicize everything :)

 
Upvote 0 Downvote
Hi SergeiY:
Thank you very much for your help. Do you have working examples for this question?

Big thanks

Haijun
 
Upvote 0 Downvote
ok I tested this in IE 6 and Netscape 4.7

*******************************************
Code: 
<html>
<head>
	<title>Select Items Once</title>
	
	<SCRIPT LANGUAGE=&quot;JavaScript&quot; TYPE=&quot;text/javascript&quot;>
    <!--
    function itemSelected()
	{
		var currIndex;
		var selectedItems1;
		var selectedItems2;
		
		//get current selected index
		currIndex = document.myForm.mySelect.options.selectedIndex;

		selectedItems1 = document.myForm.selectedItems1.value;
		selectedItems2 = document.myForm.selectedItems2.value;

		document.myForm.selectedItems1.value = document.myForm.mySelect.options[currIndex].text + &quot;,&quot; + selectedItems1;
		document.myForm.selectedItems2.value = document.myForm.mySelect.options[currIndex].value + &quot;,&quot; + selectedItems2;
		
		document.myForm.mySelect.options[currIndex] = null;
	}
    //-->
    </SCRIPT>
</head>

<body>

<form action=&quot;&quot; name=&quot;myForm&quot;>
	<select name=&quot;mySelect&quot; size=&quot;1&quot; onChange=&quot;itemSelected()&quot;>
		<option value=&quot;1&quot;>AA</option>
		<option value=&quot;2&quot;>BB</option>
		<option value=&quot;3&quot;>CC</option>
		<option value=&quot;4&quot;>DD</option>
		<option value=&quot;5&quot;>EE</option>
		<option value=&quot;6&quot;>FF</option>
		<option value=&quot;7&quot;>GG</option>
		<option value=&quot;8&quot;>HH</option>
	</select>
	
	<br>
	<input type=&quot;text&quot; name=&quot;selectedItems1&quot; size=&quot;100&quot;>
	<br>
	<input type=&quot;text&quot; name=&quot;selectedItems2&quot; size=&quot;100&quot;>
</form>

</body>
</html>
*******************************************
 
Upvote 0 Downvote
Dear SergeiY:
I tried your code, it is wonderful. Right now I have 10 dropdown lists in my form with the same items. How can I generate new dropdown list based upon other dropdown lists'selection? For example, I have 10 dropdown list, all with item 1,2,3,4,5,6,7,8,9,10. When user select 1 in dropdown list one, the other 9 drop down list have 2-10, 9 items total. if second drop down has 2 selected, other 8 dropdown will only have 8 items from 3-10.
Please give me a suggestion if you can.

Big thanks

Haijun

 
Upvote 0 Downvote
I don't understand why you would have 10 dropdown boxes with same info on a page but it's up to you ...

what you need to do is to have onChange() event to be fired on all dropdown boxes and pass dropdown name to the validation function like this:

onChange = itemSelected('mySelect')&quot;>

so when your itemSelected function is called it knows which field fired ivent and it can find selected item and remove it not only from current field but from all others as well.

I am a bit short of time today but I hope this helps.

If you'll get stuck with it let me know.

Sergei
 
Upvote 0 Downvote
Your requirements sound like they could be accomplished much more simply with a
Code: 
select/option
HTML control with the MULTIPLE attribute enabled, e.g.
Code: 
<html><head>
  <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=ISO-8859-1&quot;>
</head>
<body>
<br>
<form action=&quot;doit.asp&quot; method=&quot;post&quot;>
Please select one or more: 
(Use the CNTRL key to select more than one item)

<select name=&quot;pets&quot; multiple size=2>
<option>cat</option>
<option>dog</option>
<option>horse</option>
<option>fish</option>
</select>
</form>
</body>
</html>

Use the size= attribute to vary how many rows show. When doit.asp processes the form, request.for(&quot;pets&quot;) will be a comma-separated list, or you can address the user's choices individually by referring to the request.form(&quot;pets&quot;)(0) through request.form(&quot;pets&quot;)(n) where n is request.form(&quot;pets&quot;).Count

 
Upvote 0 Downvote
lottastuff,

You're talking about server side scripting not client side. What longmatch is after is a dynamic client validation and removal of selected items.

Sergei
 
Upvote 0 Downvote
What longmatch is after is a dynamic client validation and removal of selected items.

maybe we should move the thread to a client scripting forum then [wink]

forum216 or forum329

____________________________________________________
get the best answer to your questions by asking the best questions &quot;General FAQ&quot; faq333-2924
onpnt2.gif
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

leifoet
  • Locked
  • Question
How to send HTML emails with ASP classic?
Replies
0
Views
770
leifoet
leifoet
leifoet
  • Locked
  • Question
How to check if a datatable is empty ?
Replies
0
Views
548
leifoet
leifoet
penguinspeaks
  • Locked
  • Question
Return to current location on page after asp processes.
Replies
2
Views
671
penguinspeaks
penguinspeaks
bslintx2021
  • Locked
  • Question
How to configure IIS 10 server to allow Classic ASP to connect to MSSQL server database on a domain
Replies
1
Views
1K
penguinspeaks
penguinspeaks
leifoet
  • Locked
  • Question
Multi-selection dropdown list does not work
Replies
0
Views
295
leifoet
leifoet

Part and Inventory Search

Sponsor

Back
Top