При создании выпадающего меню, состоящего из двух списков select, столкнулся с тем, что после успешного выполнения Ajax-запроса на формирование второго списка select, второй список select изменяет свой вид и стили. В процессе подгрузки фрагмента кода не учитывается атрибут "data-live-search" (поле поиска списка). При применении класса selectpicker фреймворка Bootstrap выпадающий список вообще не отображается. Что можно сделать для того, чтобы списки имели одинаковый стиль и функционал? Выкладываю код двух файлов: index.php и findState.php
Файл index.php:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta charset="utf-8">
<title>Select country</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<style>
body {
padding-top: 70px;
}
</style>
<script language="javascript" type="text/javascript">
function getXMLHTTP() {
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getState(countryId) {
var strURL="findState.php?country="+countryId;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) // Запрос отправлен
{
// only if "OK"
if (req.status == 200) // Ответ получен
{
document.getElementById('statediv').innerHTML=req.responseText;
document.getElementById('citydiv').innerHTML='<select name="city">'+
'<option>Выбрать город js</option>'+
'</select>';
} else {
alert("Problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
</head>
<body>
<div class="container">
<form action="" name="form" method="post">
<div class="form-group row">
<div class="col-lg-3">
<label>Country</label>
<select name="country"
class="selectpicker form-control"
onChange="getState(this.value)"
data-container="body"
data-live-search="true"
title="Select country"
data-hide-disabled="true">
<option value="">Select country</option>
<option value="1">USA</option>
<option value="2">Canada</option>
</select>
</div>
<div class="col-lg-3" id="statediv">
<label>State1</label>
<select name="state"
class="selectpicker form-control"
onchange="getCity(1,this.value)"
data-container="body"
data-live-search="true"
title="Select state1"
data-hide-disabled="true">
<option>Select state</option>
</select>
</div>
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
</body>
</html>
Файл findState.php:
<html>
<head>
<body>
<label>State2</label>
<select name="state"
class=" form-control"
onchange="getCity('1',this.value)"
data-container="body"
data-live-search="true"
title="Select state 2"
data-hide-disabled="true"
>
<option>Select state 2</option>
<option value="1">Alaska</option>
<option value="2">Colorado</option>
<option value="3">Quebec</option>
<option value="4">Alberta</option>
</select>
</body>
</head>
</html>
