Pre-Populate Multi Selct form with JS

**thatguy2** · 12-08-2010, 05:19 PM

I am trying to pre-populate form selections by evaluating a string. I will import a dynamic string later, but wanted to focus on the search function. If the value has a match in the string then write "selected" in the input tag to select it for the viewer. What am I doing wrong?

HTML Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
function match_search(search_option) {
var myRegExp = /search_option/;
var string1 = "specialty1,specialty2,specialty3,specialty4";
var match1 = string1.search(myRegExp);

if(match1 != -1)
	document.write("selected"); 
	// End Result in form <option id="specialty2" value="specialty2" selected>specialty2</option>
else
	document.write("");
}
</script>
</head>
<BODY> 

<!-- multi_search -->
<table><tr><td>
<select value name="specialty" size="5" multiple id="specialty">
<!-- <option id="specialty2" value="specialty2" selected>specialty2</option> -->
  <option id="specialty1" value="specialty1" onload="match_search(specialty1)">specialty1</option>
  <option id="specialty2" value="specialty2" onload="match_search(specialty2)">specialty2</option>
  <option id="specialty3" value="specialty3" onload="match_search(specialty3)">specialty3</option>
  <option id="specialty4" value="specialty4" onload="match_search(specialty4)">specialty4</option>
  <option id="specialty5" value="specialty5" onload="match_search(specialty5)">specialty5</option>
  <option id="specialty6" value="specialty6" onload="match_search(specialty6)">specialty6</option>
</select>
</td></tr></table>
<!-- multi_search -->

</body>

**toicontien** · 12-08-2010, 09:45 PM

Try this out:

Code:

function MultiSelect() {
	this.constructor.apply(this, arguments);
}

MultiSelect.prototype = {
	
	select: null,
	
	values: null,
	
	constructor: function(values) {
		this.values = String(values);
	},
	
	init: function(select) {
		this.select = select;
		this.autoSelect();
		select = null;
	},
	
	autoSelect: function() {
		for (var i = 0, length = this.select.options.length; i < length; i++) {
			this.select.options[i].selected = this.match(this.select.options[i].value);
		}
	},
	
	match: function(value) {
		return (this.values.indexOf(value) > -1);
	}
	
};

To use:

Code:

<select name="specialty" size="5" multiple id="specialty">
  <option value="specialty1">specialty1</option>
  <option value="specialty2">specialty2</option>
  <option value="specialty3">specialty3</option>
  <option value="specialty4">specialty4</option>
  <option value="specialty5">specialty5</option>
  <option value="specialty6">specialty6</option>
</select>

<script type="text/javascript">
  var specialty = new MultiSelect(["specialty1", "specialty3"]);
  specialty.init(document.getElementById("specialty"));
</script>

I haven't tested the code yet, but it looks like it would work. Maybe you can take it from here?

**thatguy2** · 12-09-2010, 01:36 PM

This works great, thank you! I am having one issue though. Why are some selections finding matches that are similar and selecting them and some that are similar are not? How can I fix this?
For Example if I pass the following I get the >Select> result:
Anesthesiology >Selects> Anesthesiology
Anesthesiology_Pain_Management >Selects> Anesthesiology,Anesthesiology_Pain_Management,Pain_Management
Pain_Management >Selects> Pain_Management

HTML Code:

function MultiSelect() {
	this.constructor.apply(this, arguments);
}

MultiSelect.prototype = {
	select: null,
	values: null,
	constructor: function(values) {
		this.values = String(values);
	},
	
	init: function(select) {
		this.select = select;
		this.autoSelect();
		select = null;
	},
	
	autoSelect: function() {
		for (var i = 0, length = this.select.options.length; i < length; i++) {
			this.select.options[i].selected = this.match(this.select.options[i].value);
		}
	},
	
	match: function(value) {
		return (this.values.indexOf(value) > -1);
	}
	
};

onload = function() {
  var specialty = new MultiSelect(["Anesthesiology_Pain_Management"]);
  specialty.init(document.getElementById("specialty"));
};

Form code:

HTML Code:

<select value name="specialty" size="6" multiple class="textbox_full" id="specialty">                    
  <option value="Anesthesiology" id="Anesthesiology">Anesthesiology</option>
  <option value="Anesthesiology_Pain_Management" id="Anesthesiology_Pain_Management">Anesthesiology Pain Management</option>
  <option value="Oral_Maxillofacial_Surgery" id="Oral_Maxillofacial_Surgery">Oral Maxillofacial Surgery</option>
  <option value="Orthopaedic_Surgery" id="Orthopaedic_Surgery">Orthopaedic Surgery</option>
  <option value="Orthopaedics_Adult_Reconstructive" id="Orthopaedics_Adult_Reconstructive">Orthopaedics/Adult Reconstructive</option>
  <option value="Pain_Management" id="Pain_Management">Pain Management</option> 
</select>

Thread: Pre-Populate Multi Selct form with JS

Thread Tools

Display

Pre-Populate Multi Selct form with JS

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions