Блог

Главная - Вопросы по программированию - Проблема с материализацией и загрузкой второго выбора с помощью ajax

Проблема с материализацией и загрузкой второго выбора с помощью ajax

#materialize

#материализовать

Вопрос:

Код в https://lovelymatrimonial.com/testajax.php работает совершенно нормально. Я выбираю Индию, она выводит список состояний во втором элементе выбора. Я также повторяю sql только для тестирования.

Если я попытаюсь использовать materialize css, функциональность не работает.

Я читал во многих местах, что мне нужно повторно инициализировать. Но не очень хорошо в jquery / javascript.

Пожалуйста, помогите

 <html>
  <head>

    <script>
function showStateList(str) {
  if (str == "") {
    document.getElementById("statesHint").innerHTML = "";
    return;
  } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 amp;amp; this.status == 200) {
        document.getElementById("statesHint").innerHTML = this.responseText;
      }
    };
    xmlhttp.open("GET","getstatelist.php?q=" str,true);
    xmlhttp.send();
  }
  

  
}
     
</script>

</head>
<body>

                                       <div class="input-field col s3">
                                            <select name="country_id" onchange="showStateList(this.value)">
                                                <option value="0">Select Country</option>
                                                <option value="104">India - IN</option>
                                          <?php
$country_sql = "SELECT id,name,code FROM country where status='1'";
$get_country_details = mysqli_query($conn, $country_sql); // echo "aaaa" . $country_sql;
while($country = mysqli_fetch_assoc($get_country_details))
    {
if ($country['id']==$country_id){$selectedd='selected';}else {$selectedd='';}
    echo    "<option value='".$country['id']."' ".$selectedd.">".$country['name']. "-" .$country['code']."</option>";
   }
?>
                                                        
                                            </select>
                                        </div>
  
                
                                                     <div  id="statesHint">
                                        </div>
  
</body> 
    <script src="js/jquery.min.js"></script>

    <script src="js/materialize.min.js" type="text/javascript"></script>


</html>

Ответ №1:

На данный момент я решил это, добавив класс browser-default во второй элемент (select)

 <select class='browser-default'>