Javascript (jQuery) fill dropdown after textbox input

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.
LVL 1
SerellynAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

KiasChaos83Commented:
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
SerellynAuthor Commented:
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
KiasChaos83Commented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SerellynAuthor Commented:
Thanks, works like a charm
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.