www.webdeveloper.com
Results 1 to 3 of 3

Thread: Pre-Populate Multi Selct form with JS

  1. #1
    Join Date
    Dec 2010
    Posts
    2

    Pre-Populate Multi Selct form with JS

    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>

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    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?

  3. #3
    Join Date
    Dec 2010
    Posts
    2
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles