我想使用 Bootstrap 向我的页面添加样式。我有 Bootstrap 选择库，问题是，当我有 <select class="selectpicker" 时……诸如此类，效果很好。问题是我的第二个选择器是根据第一个选择器的选择生成的。
这是生成第二个选择器的代码。
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 < 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";
}
这是第一个选择器...此外，由于某种原因，它在选择状态时不会消失，但当我没有 "selectpicker" 时它就会消失。应用类。
<select class="selectpicker"id="stateSelect" onchange="stateSelected();" >
<option value="" selected="selected">Select a state</option>
<option value="stateAlabama">Alabama</option>
<option value="stateAlaska">Alaska</option>
<option value="stateArizona">Arizona</option>
<option value="stateArkansas">Arkansas</option>
<option value="stateCalifornia">California</option>
<option value="stateColorado">Colorado</option>
<option value="stateConnecticut">Connecticut</option>
<option value="stateDelaware">Delaware</option>
<option value="stateFlorida">Florida</option>
<option value="stateGeorgia">Georgia</option>
<option value="stateHawaii">Hawaii</option>
<option value="stateIdaho">Idaho</option>
<option value="stateIllinois">Illinois</option>
<option value="stateIndiana">Indiana</option>
<option value="stateIowa">Iowa</option>
<option value="stateKansas">Kansas</option>
<option value="stateKentucky">Kentucky</option>
<option value="stateLouisiana">Louisiana</option>
<option value="stateMaine">Maine</option>
<option value="stateMaryland">Maryland</option>
<option value="stateMassaschusetts">Massaschusetts</option>
<option value="stateMichigan">Michigan</option>
<option value="stateMinnesota">Minnesota</option>
<option value="stateMississippi">Mississippi</option>
<option value="stateMissouri">Missouri</option>
<option value="stateMontana">Montana</option>
<option value="stateNebraska">Nebraska</option>
<option value="stateNevada">Nevada</option>
<option value="stateNewHampshire">New Hampshire</option>
<option value="stateNewJersey">New Jersey</option>
<option value="stateNewMexico">New Mexico</option>
<option value="stateNewYork">New York</option>
<option value="stateNorthCarolina">North Carolina</option>
<option value="stateNorthDakota">North Dakota</option>
<option value="stateOhio">Ohio</option>
<option value="stateOklahoma">Oklahoma</option>
<option value="stateOregon">Oregon</option>
<option value="statePennsylvania">Pennsylvania</option>
<option value="stateRhodeIsland">RhodeIsland</option>
<option value="stateSouthCarolina">SouthCarolina</option>
<option value="stateSouthDakota">SouthDakota</option>
<option value="stateTennessee">Tennessee</option>
<option value="stateTexas">Texas</option>
<option value="stateUtah">Utah</option>
<option value="stateVermont">Vermont</option>
<option value="stateVirginia">Virginia</option>
<option value="stateWashington">Washington</option>
<option value="stateWisconsin">Wisconsin</option>
<option value="stateWyoming">Wyoming</option>
<option value="stateWashingtonDC">Washington D.C.</option>
</select>
顺便说一句，这是一个功能齐全的选择器，任何想要使用它的人都可以随意使用。我只是遇到 Bootstrap 元素无法正常运行的问题。
同样，问题是没有"selectpicker"它工作正常，但是当我将它添加到 html 中时，它会阻止 html 在选择该项目后消失，并且出于某种原因 "selectpicker"在我的 jquery 中根本不起作用。
最佳答案
如果您使用https://silviomoreto.github.io/bootstrap-select/
使用s.selectpicker('refresh');或$('.selectpicker').selectpicker('refresh');
在s.parentNode.removeChild(s);
s.parentNode.removeChild(s);
s.selectpicker('refresh');
引用this了解更多详情
关于javascript - 使用 jquery 完成后 Bootstrap select 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37418261/