使用 jquery 完成后，引导选择不起作用

Question

我想使用引导程序为我的页面添加样式。我有引导选择库，问题是，当我有 <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"class 时它会消失。

<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>

顺便说一句，它是一个功能齐全的选择器，任何想要使用它的人都可以随意使用。我只是遇到了引导元素无法正常运行的问题。

同样，问题是没有"selectpicker" 它可以正常工作，但是当我将它添加到 html 时，它会阻止 html 在选择项目后消失，并且由于某种原因"selectpicker" 根本无法正常工作我的 jquery。

Answer 1

如果您使用的是https://silviomoreto.github.io/bootstrap-select/

使用s.selectpicker('refresh'); 或$('.selectpicker').selectpicker('refresh'); 在s.parentNode.removeChild(s);之后

s.parentNode.removeChild(s);
s.selectpicker('refresh');

更多详情请参考this