Bootstrap select не работает, когда сделано с jquery

Я хочу добавить стиль на свою страницу с помощью начальной загрузки. У меня есть библиотека выбора начальной загрузки, и проблема в том, что когда у меня есть <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.


person Community    schedule 24.05.2016    source источник
comment
class=selectpickerid=stateSelect может быть, что между классом и идентификатором нет пробела, и он не получает elemetById. Не положительный, но это может быть проблемой.   -  person Lahar Shah    schedule 24.05.2016
comment
нет, не проблема   -  person    schedule 25.05.2016
comment
Проверить ответ. Может быть, это работает.   -  person Lahar Shah    schedule 25.05.2016


Ответы (1)


Если вы используете https://silviomoreto.github.io/bootstrap-select/

используйте s.selectpicker('refresh'); ИЛИ $('.selectpicker').selectpicker('refresh'); после s.parentNode.removeChild(s);

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

См. это для получения более подробной информации.

person Lahar Shah    schedule 24.05.2016