VB icon

Multiple Select Combo box

Email
Submitted on: 1/3/2015 5:22:00 AM
By: Sine45 (from psc cd)  
Level: Intermediate
User Rating: By 4 Users
Compatibility: Java (JDK 1.1), Java (JDK 1.2)
Views: 2203
 
     Multiple Select combo with form validation for minimum and maximum selections

 
code:
Can't Copy and Paste this?
Click here for a copy-and-paste friendly version of this code!
				
//**************************************
// Name: Multiple Select Combo box
// Description:Multiple Select combo with form validation for minimum and maximum selections
// By: Sine45 (from psc cd)
//**************************************

<HTML>
<HEAD>
<META NAME="Author" Content="Tanwani Anyangwe">
<TITLE>Multiple - Select Box</TITLE>
</HEAD>
<BODY>
<P> </P>
<script>
function MultiCombo(name,value,options){	
	this.name = name;
	this.options = options;
	this.value = value;
	this.size = 5;
	this.delimeter = ","
	//this.formName = "document.forms[0]";
	this.formName = document.forms[0];
	this.leftOptions = new Array()
	this.rightOptions = new Array()
	this.caption = name.toUpperCase();
	this.minRequired = 0;
	this.maxRequired = 100;
	this.build = _build;
	this.fillCombos = _fillCombos;
	this.onChange = _onChange;
	this.onClick = _onClick;
	this.onSubmit = _onSubmit;
	this.hiddenField = _hiddenField;
	this.button = _button;
	this.listBox = _listBox;
}
function _onChange(sfrom,sto){
	return "if(this.form.autoSelect"+ this.name +".checked){"+ this.onClick(sfrom,sto,false) +"};"
}
	
function _onClick(sfrom,sto,ball){
	var s = "var l=this.form."+ sfrom +";var r=this.form."+ sto +";"
	if (ball){
		s += "for(i=0;i<l.length;i++){if(l.options[i].value!='_blank'){r.options[r.length]=new Option(l.options[i].text,l.options[i].value);l.options[i]=null;--i;}};"
	}
	else {
		s += "var i=l.selectedIndex;if(i==-1){alert('Select an item first!');return false;};if(l.options[i].value!='_blank'){r.options[r.length]=new Option(l.options[i].text,l.options[i].value);l.options[i]=null;};"
	}
	s += "for(i=0;i<r.length;i++){if(r.options[i].value=='_blank'){r.options[r.length]=new Option(r.options[i].text,r.options[i].value);r.options[i]=null;}};"
	s += "var s=''; for(i=0;i<this.form."+ this.rightName +".length;i++){if(this.form."+ this.rightName +".options[i].value!='_blank'){s = s + this.form."+ this.rightName +".options[i].value + ',';}};this.form."+ this.name + ".value=s;"
		
	return s;
}
	
function _onSubmit(){
	var s = "if(this.right"+ this.name + ".length-1<"+ this.minRequired +"){alert('You must select at least "+ this.minRequired +" "+ this.caption +"');this.left"+ this.name + ".focus();return false;};"
	s = s +"if(this.right"+ this.name + ".length-1>"+ this.maxRequired +"){alert('You must select at most "+ this.maxRequired +" "+ this.caption +"');this.left"+ this.name + ".focus();return false;};"
	return s;
}
	
function _build(){
	var spacer;
	spacer = "<div style=\"font-size:1pt;\"> </div>";
	this.value = this.value.split(this.delimeter)
	this.options = this.options.split(this.delimeter)
	this.leftName = "left" + this.name;
	this.rightName = "right" + this.name;
	this.fillCombos();
	var s = "<table class=\"combo_multiple\" border=\"0\" cellspacing=\"0\" cellpadding=\"2\">"
	s += "<tr><caption><b>"+ this.caption +"</b></caption><th>Available Choices<br>"
	s += this.listBox(this.leftName,this.leftOptions,this.onChange(this.leftName,this.rightName));
	s += "</th><th>"
	s += "<input name=\"autoSelect"+ this.name +"\" title=\"Auto Select\" type=\"checkbox\">";
	s += spacer;
	s += this.button(">>", this.onClick(this.leftName,this.rightName,true));
	s += spacer
	s += this.button(" > ", this.onClick(this.leftName,this.rightName,false))
	s += spacer
	s += this.button(" < ", this.onClick(this.rightName,this.leftName,false))
	s += spacer
	s += this.button("<<", this.onClick(this.rightName,this.leftName,true))
	s += "</th><th>Selected Choices<br>" 
	s += this.listBox(this.rightName,this.rightOptions,this.onChange(this.rightName,this.leftName))
	s += "</th>"
	s += "</tr></table>";
	s += this.hiddenField();
	
	this.formName.onsubmit = new Function(this.onSubmit());
	//eval(this.formName).onsubmit = new Function(this.onSubmit());	
	
	document.write (s);
}
function _hiddenField(){
	return "<input type=\"hidden\" name=\""+ this.name +"\" value=\""+ this.value.join(",") +"\">\n";
}
	
function _listBox(sName,aOptions,sOnChange){
	var s = "<select size=\""+ this.size +"\" name=\""+ sName +"\" onChange=\""+ sOnChange +"\" multiple>\n";
	for(var i=0;i<aOptions.length;i++) {
		s += "<option value=\""+ aOptions[i][0] +"\" >" + aOptions[i][1] + "</option>\n";
	}
	s += "</select>\n";
	return s;
}
	
function _button(sValue,sOnClick){
	return "<input type=\"button\" name=\"btn"+ this.name + sValue +"\" value=\""+ sValue +"\" onClick=\""+ sOnClick +"\" class=\"btn_combo\">";
}
	
function _fillCombos(){
	var i,j
 	var text,value;
	var blank = "";
	for(i=0;i<30;i++){blank += " "};
	for(i=0;i<this.options.length;i++){		
		if( this.options[i].indexOf("|") > -1 ){ 
			var temp_ar = this.options[i].split("|");			
			value = temp_ar[0];
			text = temp_ar[1];
		}
		else {
			var value = this.options[i];
			var text = this.options[i];
		}
		
		var found = SearchArray(this.value,value);		
		
		if (!found){
			this.leftOptions[this.leftOptions.length] = new Array()
			this.leftOptions[this.leftOptions.length-1][1] = text;
			this.leftOptions[this.leftOptions.length-1][0] = value;
		}
		else {
			this.rightOptions[this.rightOptions.length] = new Array()
			this.rightOptions[this.rightOptions.length-1][1] = text;
			this.rightOptions[this.rightOptions.length-1][0] = value;
		}
	}
	this.leftOptions[this.leftOptions.length] = new Array()
	this.leftOptions[this.leftOptions.length-1][1] = blank;
	this.leftOptions[this.leftOptions.length-1][0] = "_blank";
	
	this.rightOptions[this.rightOptions.length] = new Array()
	this.rightOptions[this.rightOptions.length-1][1] = blank;
	this.rightOptions[this.rightOptions.length-1][0] = "_blank";
}	
function SearchArray(Ar,val){
	for(var i=0;i<Ar.length;i++){
		if(Ar[i]==val){return true;}
	}
	return false;
}
</script>
<form onsubmit="" id=form1 name=form1 action="#">
<script>
var allOptions = "1|Mark Twain,2|Tanwani Anyangwe,3|Charles Dickens,4|Micheal Crichton,5|Stephen King,6|Jean Jacques Voltaire";
var myvalues = "1,5,6";
var g = new MultiCombo("authors",myvalues,allOptions);
g.minRequired = 4;
g.maxRequired = 5;
g.build();
</script>
<input type=submit value=send>
</form>
</BODY>
</HTML>


Other 6 submission(s) by this author

 


Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:

Your Vote

What do you think of this code (in the Intermediate category)?
(The code with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)
 

Other User Comments


 There are no comments on this submission.
 

Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular code, please click here instead.)
 

To post feedback, first please login.