Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 683
  • Last Modified:

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.
0
Serellyn
Asked:
Serellyn
  • 2
  • 2
1 Solution
 
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
 
SerellynAuthor Commented:
Thanks, works like a charm
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now