Solved

Javascript (jQuery) fill dropdown after textbox input

Posted on 2010-08-14
4
677 Views
Last Modified: 2012-05-10
Hello guys,

I'm trying to figure out how to populate a combobox AFTER I've insert something in the textbox. My goal is to, enter an artist in the textbox, and then the combobox should be filled with albums of that artist. The artists/albums are already excisting in a database.

Btw, I'm using jQuery. Hope you guys can help me out with some example scripts.
0
Comment
Question by:Serellyn
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 5

Expert Comment

by:KiasChaos83
ID: 33438542
Hi there,

<input id="txtArtist" type="textbox" />
<select id="ddlAlbums">
</select>

<script>
$("#txtArtist").change(function() { UpdateDropDown(); });

function UpdateDropDown() {
//the below is just an example list, but you would need to substitute your own
var optionArray = {
      "Value1" : "Album Text 1",
      "Value2" : "Album Text 2",
      "Value3" : "Album Text 3"
};
// Use true if you want to select added options
$("#ddlAlbums").addOption(optionArray, false);
}
</script>
0
 
LVL 1

Author Comment

by:Serellyn
ID: 33438562
Right now I've got this
<input id="artistname" name="artistname" type="text" value="" class="sText"/>
<select id="select_albumname" class="sSelect"></select>

      $("input#artistname").change(function() {
            UpdateDropDown();
      });

      function UpdateDropDown() {
            var optionArray = {
                  "Value1" : "Album Text 1",
                  "Value2" : "Album Text 2",
                  "Value3" : "Album Text 3"
            };
            // Use true if you want to select added options
            $("select#select_albumname").addOption(optionArray, false);
      }

But it doesn't work yet
0
 
LVL 5

Accepted Solution

by:
KiasChaos83 earned 500 total points
ID: 33438624
My bad, this is tested so should work..


<input id="artistname" name="artistname" type="text" value="" class="sText"/>
<select id="select_albumname" class="sSelect"></select>

<script>
	$("input#artistname").change(function() { 
		UpdateDropDown($(this).val());
    });

      function UpdateDropDown(artist) {
			var $ddl = $("select#select_albumname");

			$ddl.find('option').remove();
			
			$.each(GetAlbumList(artist), function(val, txt) {
				$ddl.append($("<option></option>").attr("value", val).text(txt));
			});
      }
	  
	  function GetAlbumList(artist) {
		//do your own code to get the album list
		var optionArray = {
			"Value1" : artist + " - Album Text 1",
			"Value2" : artist + " - Album Text 2",
			"Value3" : artist + " - Album Text 3"
		};
		return optionArray;
	  }
</script>

Open in new window

0
 
LVL 1

Author Closing Comment

by:Serellyn
ID: 33438639
Thanks, works like a charm
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

622 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question