title: Bootstrap select not working when done with jquery
body: <p>I am wanting to add style to my page using bootstrap. I have the bootstrap select library and the problem is, when I have <code>&lt;select class="selectpicker"</code>... so on and so forth, it works fine. The problem is that my second picker is generated based on the selection of my first picker.</p>
  
  <p>Here is the code that generates the second picker.</p>
  
  <pre><code>function stateSelected(){ 
      var s = document.getElementById("stateSelect");
      var alabamaCities = new Array("Auburn","Birmingham","Dothan","Florence / Muscle Shoals","Gadsden-Anniston","Huntsville / Decatur", "Mobile", "Montgomery", "Tuscaloosa");
      var alaskaCities = new Array("Anchorage / Mat-Su", "Fairbanks", "Kenai Peninsula", "Southeast Alaska");
      var arizonaCities = new Array("Flagstaff / Sedona", "Mohave County", "Phoenx", "Prescott", "Show Low", "Sierra Vista", "Tucson", "Yuma");
      var arkansasCities = new Array("Fayetteville","Fort Smith", "Jonesboro", "Little Rock", "Texarkana");
      var californiaCities = new Array("Bakersfield","Chico", "Fresno / Madera", "Gold Country", "Hanford-Corcoran","Humboldt County", "Imperial  County", "Inland Empire", "Los Angeles", "Mendocino County", "Merced", "Modesto", "Monterey Bay", "Monterey Bay", "Orange County", "Palm Springs", "Redding", "Sacramento", "San Diego", "San Francisco Bay Area", "San Luis Obispo", "Santa Barbara","Santa Maria","Siskiyou County","Stockton","Susanville","Ventura County", "Visalia-Tulare","Yuba-Sutter");
      var coloradoCities = new Array("Boulder","Colorado Springs","Denver","Eastern CO","Fort Collins / North CO", "High Rockies", "Pueblo", "Western Slope");
      var connecticutCities = new Array("Eastern CT","Hartford","New Haven","Northwest CT");
      var delawareCities = new Array("Delaware");
      var floridaCities = new Array("Broward County","Daytona Beach","Florida Keys","Fort Lauderdale","Fort  Myers / SW Florida","Gainsville","Heartland Florida","Jacksonville","Lakeland","Miami / Dade", "North Central FL","Ocala", "Okaloosa / Walton", "Orlando","Panama City","Pensacola","Sarasota-Bradenton","South Florida","Space Coast","St Augustine","Tallahassee","Tampa Bay Area","Treasure Coast","Palm Beach County");
      var georgiaCities = new Array("Albany","Athens","Atlanta","Augusta","Brunswick","Columbus","Macon / Warner Robins","Northwest GA","Savannah / Hinesville", "Statesboro", "Valdosta");
      var hawaiiCities = new Array("Hawaii");
      var idahoCities = new Array("Boise","East Idaho","Lewiston / Clarkston","Twin Falls");
      var illinoisCities = new Array("Bloomington-Normal","Champaign Urbana", "Chicago", "Decatur"," La Salle Co","Matoon-Charelston","Peoria","Rockford","Southern Illinois", "Springfield", "Western Il");
      var indianaCities = new Array("Bloomington","Evansville","Fort Wayne","Indianapolis","Kokomo","Lafayette / West Lafayette","Muncie / Anderson", "Richmond","South Bend / Michiana","Terre Haute");
      var iowaCities = new Array("Ames","Cedar Rapids","Des Moines","Dubuque","Fort Dodge","Iowa City","Mason City","Quad Cities","Sioux City","Southeast IA","Waterloo / Cedar Falls");
      var kansasCities = new Array("Lawrence","Manhattan","Northwest KS", "Salina","Southeast KS", "Southwest KS", "Topeka","Wichita");
      var kentuckyCities = new Array("Bowling Green","Eastern Kentucky","Lexington","Louisville","Owensboro","Western KY");
      var louisianaCities = new Array("Baton Rouge","Central Louisiana","Houma","Lafayette","Lake Charles","Monroe","New Orleans", "Shreveport");
      var maineCities = new Array("Maine");
      var marylandCities = new Array("Annapolis","Balimore","Eastern Shore","Fredrick","Southern Maryland","Western Maryland");
      var massachusettsCities = new Array("Boston","Cape Cod / Islands", "South Coast", "Western Massachusetts","Worcester / Central MA");
      var michiganCities = new Array("Ann Arbor","Battle Creek","Central Michigan","Detroit Metro","Flint","Grand Rapids","Holland","Jackson","Kalamazoo", "Lansing", "Monroe","Muskegon","Northern Michigan","Port Huron","Saginaw-Midland-Baycity","Southwest Michigan","The Thumb","Upper Peninsula");
      var minnesotaCities = new Array("Bemidji","Brainerd","Duluth/ Superior","Mankato","Minneapolis / St Paul","Rochester","Southwest MN","St Cloud");
      var mississippiCities = new Array("Gulfport / Biloxi","Hattiesburg","Jackson","Meridian","North Mississippi","Southwest MS");
      var missouriCities = new Array("Columbia / Jeff City","Joplin","Kansas City","Kirksville","Lake of the Ozarks","Southeast Missouri","Springfield","St Joseph","St Louis");
      var montanaCities = new Array("Billings","Bozeman","Butte","Great Falls","Helena","Kalispell","Missoula","Eastern Montana");
      var nebraskaCities = new Array("Grand Island","Linclon","North Platte","Omaha /Council Bluffs","Scottsbluff / Panhandle");
      var nevadaCities = new Array("Elko,","Las Vegas","Reno / Tahoe");
      var newHamshireCities = new Array("New Hampshire");
      var newJerseyCities = new Array("Central NJ","Jersey Shore", "North Jersey","south Jersey");
      var newMexicoCities = new Array("Albuquerque","Clovis / Portales", "Farmington","Las Cruces","Roswell / Carlsbad","Santa Fe / Taos");
      var newYorkCities = new Array("Albany","Binghamton","Buffalo","Catskills","Chautauqua","Elmira-Corning","Finger Lakes","Glens Falls","Hudson Valley", "Ithica","Long Island","New York City","Oneonta","Plattsburg-Adirondacks","Potsdam-Canton-Masser","Rochester","Syracuse","Twin Tiers NY/PA","Utica-Rome-Oneida","Watertown");    
      var northCarolinaCities = new Array("Asheville","Boone","Charlotte","Easter NC","Fayetteville","Greensboro","Hickory / Lenoir","Jacksonville","Outer Banks","Raleigh / Durham / CH");    
      var northDakotaCities = new Array("Bismarck","Fargo / Moorhead","Grand Forks","North Dakota");
      var ohioCities = new Array("Akron / Canton", "Ashtabula","Athens","Chillicothe","Cincinnati","Cleveland","Columbus","Dayton / Springfield", "Lima / Findlay","Mansfield","Sandusky","Toledo","Tuscarawas Co","Youngstown","Zanesville / Cambridge");
      var oklahomaCities = new Array("Lawton","Northwest OK","Oklahoma City","Stillwater","Tulsa");
      var oregonCities = new Array("Bend","Corvallis / Albany","East Oregon","Eugene","Klamath Falls","Medford-Ashland","Oregon Coast","Portland","Roseburg","Salem");
      var pennsylvaniaCities = new Array("Altoona-Johnstown","Cumberland Valley","Erie","Harrisburg","Lancaster","Lehigh Valley","Meadville","Philadelphia","Pittsburgh","Poconos","Reading","Scranton / Wilkes-Barre","State College","Williamsport","York");
      var rhodeIslandCities = new Array("Rhode Island");
      var southCarolinaCities = new Array("Charleston","Columbia","Florence","Greenville / Upstate", "Hilton Head","Myrtle Beach");
      var southDakotaCities = new Array("Northeast SD","Pierre / Central SD","Rapid City / West SD","Sioux Falls / SE SD","South Dakota");
      var tennesseeCities = new Array("Chattanooga","Clarksville","Cookeville","Jackson","Knoxville","Memphis","Nashville","Tri-Cities");
      var texasCities = new Array("Abilene","Amarillo","Austin","Beaumont / Port Authur","Brownsville","College Station","Corpus Christi","Dallas / Fort Worth","Deap East Texas","Del Rio / Eagle Pass","El Paso","Galveston","Houston","Kileen / Temple / FT Hood","Laredo","Lubbock","McAllen / Edinburg","Odessa / Midland","San Angelo","San Antonio","San Marcos","Southwest TX","Texoma","Tyler / East TX","Victoria","Waco","Wichita Falls");
      var utahCities = new Array("Logan","Ogden-Clarfield","Provo / Orem","Salt Lake City","St George");
      var vermontCities = new Array("Vermont");
      var virginiaCities = new Array("Charlottesville","Danville","Fredericksburg","Hampton Roads","Lynchburg","New River Valley","Richmond","Roanoke","Southwest VA","Winchest");
      var washingtonCities = new Array("Bellingham","Kennewick-Pasco-Richland","Moses Lake","Olympic Peninsula","Pullman / Moscw","Seattle-Tacoma","Skagit / Island /SJI","Spokane / Coeur D'Alene","Wenatchee","Yakima");
      var westVirginiaCities = new Array("Charelston","Eastern Panhandle","Huntington-Ashland","Morgantown","Northern Panhandle","Huntington-Ashland","Morgantown","Northern Panhandle","Parkersburg-Marietta","Southern WV");
      var wisconsinCities = new Array("Appleton-Oshkosh-FDL","Eau Claire","Green Bay","Janesville","Kenosha-Racine","La Crosse","Madison","Milwaukee","Northern WI","Sheboygan","Wausau");
      var wyomingCities = new Array("Wyoming");
      var WashingtonDCCities = new Array("Washington");
          var title = document.createElement("p");
          title.innerHTML = "Select a city:"
          title.className = "heading";
          document.body.appendChild(title);
          switch(s.options[s.selectedIndex].value){
              case "stateAlabama":
                  createSelector(alabamaCities, s);
                  break;
              case "stateAlaska":
                  createSelector(alaskaCities, s);
                  break;
              case "stateArizona":
                  createSelector(arizonaCities, s);
                  break;
              case "stateArkansas":
                  createSelector(arkansasCities, s);
                  break;
              case "stateCalifornia":
                  createSelector(californiaCities, s);
                  break;
              case "stateColorado":
                  createSelector(coloradoCities, s);
                  break;
              case "stateConnecticut":
                  createSelector(cconnecticutCities, s);
                  break;
              case "stateDelaware":
                  createSelector(delawareCities, s);
                  break;
              case "stateFlorida":
                  createSelector(floridaCities, s);
                  break;
              case "stateHawaii":
                  createSelector(hawaiiCities, s);
                  break;
              case "stateIdaho":
                  createSelector(idahoCities, s);
                  break;
              case "stateIllinois":
                  createSelector(illinoisCities, s);
                  break;
              case "stateIndiana":
                  createSelector(indianaCities, s);
                  break;
              case "stateIowa":
                  createSelector(iowaCities, s);
                  break;
              case "stateKansas":
                  createSelector(kansasCities, s);
                  break;
              case "stateKentucky":
                  createSelector(kentuckyCities, s);
                  break;
              case "stateLouisiana":
                  createSelector(louisianaCities, s);
                  break;
              case "stateMaine":
                  createSelector(maineCities, s);
                  break;
              case "stateMassachusetts":
                  createSelector(massachusettsCities, s);
                  break;
              case "stateMichigan":
                  createSelector(michiganCities, s);
                  break;
              case "stateMinessota":
                  createSelector(minessotaCities, s);
                  break;
              case "stateMississippi":
                  createSelector(mississippiCities, s);
                  break;
              case "stateMissouri":
                  createSelector(missouriCities, s);
                  break;
              case "stateMontana":
                  createSelector(montanaCities, s);
                  break;
              case "stateNebraska":
                  createSelector(nebraskaCities, s);
                  break;
              case "stateNewHampshire":
                  createSelector(newHampshireCities, s);
                  break;
              case "stateNewMexico":
                  createSelector(newMexicoCities, s);
                  break;
              case "stateNewYork":
                  createSelector(newYorkCities, s);
                  break;
              case "stateNorthCarolina":
                  createSelector(northCarolinaCities, s);
                  break;
              case "stateNorthDakota":
                  createSelector(northDakotaCities, s);
                  break;
              case "stateOhio":
                  createSelector(ohioCities, s);
                  break;
              case "stateOklahoma":
                  createSelector(oklahomaCities, s);
                  break;
              case "stateOregon":
                  createSelector(oregonCities, s);
                  break;
              case "statePennsylvania":
                  createSelector(pennsylvaniaCities, s);
                  break;
              case "stateRhodeIsland":
                  createSelector(rhodeIslandCities, s);
                  break;
              case "stateSouthDakota":
                  createSelector(southDakotaCities, s);
                  break;
              case "stateTennessee":
                  createSelector(tennesseeCities, s);
                  break;
              case "stateTexas":
                  createSelector(texasCities, s);
                  break;
              case "stateUtah":
                  createSelector(utahCities, s);
                  break;
              case "stateVermont":
                  createSelector(vermontCities, s);
                  break;
              case "stateVirginia":
                  createSelector(virginiaCities, s);
                  break;
              case "stateWashington":
                  createSelector(washingtonCities, s);
                  break;
              case "stateWestVirginia":
                  createSelector(westVirginiaCities, s);
                  break;
              case "stateWisconsin":
                  createSelector(wisconsinCities, s);
                  break;
              case "stateWyoming":
                  createSelector(wyomingCities, s);
                  break;
              case "stateWashingtonDC":
                  createSelector(washingtonDCCities, s);
                  break;
              //still need one for Washington D.C.
  
  
          }
  }
  function createSelector(array, s){
      var sState = document.createElement("p");
      sState.innerHTML = "Selected State: " + s.options[s.selectedIndex].text;
      document.body.appendChild(sState);
      var sTitle = document.getElementById("sTitle");
      sTitle.parentNode.removeChild(sTitle);
      s.parentNode.removeChild(s);
      var newSelect = document.createElement("select");
      var holder = document.createElement("div");
      holder.className = "center";
      var selectOption = document.createElement("option");
      selectOption.selected = "selected";
      selectOption.value = "";
      selectOption.text = "Select a city";
      newSelect.appendChild(selectOption);
      for(var i = 0; i &lt; array.length; ++i){
              var newOption = document.createElement("option");
              newOption.value = "city" + array[i].replace(/\s+/g, '');
              newOption.text = array[i];
              newSelect.onchange = townSelected;
              newSelect.id = "citySelect";
              newSelect.appendChild(newOption);
      }
  
      newSelect.className = "select";
      holder.appendChild(newSelect);
      document.getElementById("citySelect").appendChild(holder);
  }
  function townSelected(){
      var c = document.getElementById("citySelect");
      window.location.href = "cities/" + c.options[c.selectedIndex].text.replace(/\s+/g, '_').toLowerCase() + ".html";
  }
  </code></pre>
  
  <p>And here is the first picker...Also, for some reason it does not dissappear upon selecting the state, but it does when I do not have the <code>"selectpicker"</code>class applied.</p>
  
  <pre><code>&lt;select class="selectpicker"id="stateSelect" onchange="stateSelected();" &gt;
  &lt;option value="" selected="selected"&gt;Select a state&lt;/option&gt;
  &lt;option value="stateAlabama"&gt;Alabama&lt;/option&gt;
  &lt;option value="stateAlaska"&gt;Alaska&lt;/option&gt;
  &lt;option value="stateArizona"&gt;Arizona&lt;/option&gt;
  &lt;option value="stateArkansas"&gt;Arkansas&lt;/option&gt;
  &lt;option value="stateCalifornia"&gt;California&lt;/option&gt;
  &lt;option value="stateColorado"&gt;Colorado&lt;/option&gt;
  &lt;option value="stateConnecticut"&gt;Connecticut&lt;/option&gt;
  &lt;option value="stateDelaware"&gt;Delaware&lt;/option&gt;
  &lt;option value="stateFlorida"&gt;Florida&lt;/option&gt;
  &lt;option value="stateGeorgia"&gt;Georgia&lt;/option&gt;
  &lt;option value="stateHawaii"&gt;Hawaii&lt;/option&gt;
  &lt;option value="stateIdaho"&gt;Idaho&lt;/option&gt;
  &lt;option value="stateIllinois"&gt;Illinois&lt;/option&gt;
  &lt;option value="stateIndiana"&gt;Indiana&lt;/option&gt;
  &lt;option value="stateIowa"&gt;Iowa&lt;/option&gt;
  &lt;option value="stateKansas"&gt;Kansas&lt;/option&gt;
  &lt;option value="stateKentucky"&gt;Kentucky&lt;/option&gt;
  &lt;option value="stateLouisiana"&gt;Louisiana&lt;/option&gt;
  &lt;option value="stateMaine"&gt;Maine&lt;/option&gt;
  &lt;option value="stateMaryland"&gt;Maryland&lt;/option&gt;
  &lt;option value="stateMassaschusetts"&gt;Massaschusetts&lt;/option&gt;
  &lt;option value="stateMichigan"&gt;Michigan&lt;/option&gt;
  &lt;option value="stateMinnesota"&gt;Minnesota&lt;/option&gt;
  &lt;option value="stateMississippi"&gt;Mississippi&lt;/option&gt;
  &lt;option value="stateMissouri"&gt;Missouri&lt;/option&gt;
  &lt;option value="stateMontana"&gt;Montana&lt;/option&gt;
  &lt;option value="stateNebraska"&gt;Nebraska&lt;/option&gt;
  &lt;option value="stateNevada"&gt;Nevada&lt;/option&gt;
  &lt;option value="stateNewHampshire"&gt;New Hampshire&lt;/option&gt;
  &lt;option value="stateNewJersey"&gt;New Jersey&lt;/option&gt;
  &lt;option value="stateNewMexico"&gt;New Mexico&lt;/option&gt;
  &lt;option value="stateNewYork"&gt;New York&lt;/option&gt;
  &lt;option value="stateNorthCarolina"&gt;North Carolina&lt;/option&gt;
  &lt;option value="stateNorthDakota"&gt;North Dakota&lt;/option&gt;
  &lt;option value="stateOhio"&gt;Ohio&lt;/option&gt;
  &lt;option value="stateOklahoma"&gt;Oklahoma&lt;/option&gt;
  &lt;option value="stateOregon"&gt;Oregon&lt;/option&gt;
  &lt;option value="statePennsylvania"&gt;Pennsylvania&lt;/option&gt;
  &lt;option value="stateRhodeIsland"&gt;RhodeIsland&lt;/option&gt;
  &lt;option value="stateSouthCarolina"&gt;SouthCarolina&lt;/option&gt;
  &lt;option value="stateSouthDakota"&gt;SouthDakota&lt;/option&gt;
  &lt;option value="stateTennessee"&gt;Tennessee&lt;/option&gt;
  &lt;option value="stateTexas"&gt;Texas&lt;/option&gt;
  &lt;option value="stateUtah"&gt;Utah&lt;/option&gt;
  &lt;option value="stateVermont"&gt;Vermont&lt;/option&gt;
  &lt;option value="stateVirginia"&gt;Virginia&lt;/option&gt;
  &lt;option value="stateWashington"&gt;Washington&lt;/option&gt;
  &lt;option value="stateWisconsin"&gt;Wisconsin&lt;/option&gt;
  &lt;option value="stateWyoming"&gt;Wyoming&lt;/option&gt;
  &lt;option value="stateWashingtonDC"&gt;Washington D.C.&lt;/option&gt;
  
  
  &lt;/select&gt;
  </code></pre>
  
  <p>it is a functioning picker btw, anyone who would like to use it, feel free. I am just having the issue with bootstrap elements not operating properly.</p>
  
  <p>Again, the problem is that without <code>"selectpicker"</code> it works fine, but when I add it to the html, it prevents the html from dissappearing after the item is selected and for some reason <code>"selectpicker"</code> is not working at all in my jquery.</p>