Solved

Javascript (jQuery) fill dropdown after textbox input

Posted on 2010-08-14
4
667 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
  • 2
  • 2
4 Comments
 
LVL 5

Expert Comment

by:KiasChaos83
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks, works like a charm
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
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…

772 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now