2016-06-06 3 views
0

Я работаю на веб-сайте автодилера, где клиент может размещать разные типы автомобилей. Клиент может классифицировать или просматривать автомобиль на основе белой пластины или желтой пластины.Как отсортировать данные по выпадающему списку

Что мой запрос id: Есть страница категории, где я показываю все типы автомобилей по умолчанию. но мне нужно, когда клиент выбирает любое значение из вниз, данные будут меняться в соответствии с выбором значения. Вот выпадающий код:

<form action="" method="post" enctype="multipart/form-data"> 
        <div class="b-infoBar__select-one"> 
        <span class="b-infoBar__select-one-title">SORT BY</span> 
        <select name="cartype" id="cartype" class="m-select"> 
         <option value="" selected="">Select Car Type</option> 
         <?php 
          $query=mysql_query("select * from cartype"); 
          while($display=mysql_fetch_array($query)) 
           { 
         ?> 
         <option value="<?php echo $display['cartype']; ?>"><?php echo $display['cartype']; ?></option> 
         <?php 
          } 
         ?> 
        </select> 
       </div> 
      </form> 

Это мой код отображения данных:

<div class="row"> 
         <?php 
         $query=mysql_query("select * from productdetail"); 
         while($display=mysql_fetch_array($query)) 
          { 
         ?> 
         <div class="col-lg-4 col-md-6 col-xs-12"> 
          <div class="b-items__cell wow zoomInUp" data-wow-delay="0.5s"> 
           <div class="b-items__cars-one-img"> 
            <a href="details.php?id=<?php echo $display['id']; ?>"><img class='img-responsive' src="images/product/<?php echo $display['img']; ?>" width="400" height="300" alt='chevrolet'/></a> 
           </div> 
           <div class="b-items__cell-info"> 
            <div class="s-lineDownLeft b-items__cell-info-title"> 
             <a href="details.php?id=<?php echo $display['id']; ?>"><h2 class=""><?php echo $display['companyname']; ?></h2></a> 
            </div> 
            <div class="row m-smallPadding"> 
             <div class="col-xs-6"> 
              <ul> 
               <li><?php echo $display['make']; ?></li> 
               <li><?php echo $display['model']; ?></li> 
               <li><?php echo $display['status']; ?></li> 
               <li><?php echo $display['fueltype']; ?></li> 
              </ul> 
              <h5 class="b-items__cell-info-price"><?php echo $display['price']; ?></h5> 
             </div> 
             <div class="col-xs-6"> 
              <div class="b-items__cell-info-km"> 
               <img src="assets/icon/meter.png" /> 
               <p><?php echo $display['kilometer']; ?></p> 
              </div> 
              <a href="details.php?id=<?php echo $display['id']; ?>" class="btn m-btn">VIEW DETAILS<span class="fa fa-angle-right"></span></a> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
         <?php 
          } 
         ?> 
        </div> 
+2

использование JQuery OnChange затем получить данные из AJAX и загрузить его на странице –

+0

у вас есть какие-либо ссылки ?? – Overseas

+0

Значения coz drop-down поступают из базы данных ... – Overseas

ответ

0
<html> 
<body> 

<script language="javascript" type="text/javascript"> 
<!-- 
//Browser Support Code 
function myFunction(){ 
    var ajaxRequest; // The variable that makes Ajax possible! 

    try{ 
     // Opera 8.0+, Firefox, Safari 
     ajaxRequest = new XMLHttpRequest(); 
    } catch (e){ 
     // Internet Explorer Browsers 
     try{ 
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      try{ 
       ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e){ 
       // Something went wrong 
       alert("Your browser broke!"); 
       return false; 
      } 
     } 
    } 
    // Create a function that will receive data sent from the server 
    ajaxRequest.onreadystatechange = function(){ 
     if(ajaxRequest.readyState == 4){ 
      var ajaxDisplay = document.getElementById('ajaxDiv'); 
      ajaxDisplay.innerHTML = ajaxRequest.responseText; 
     } 
    } 

    var cartype = document.getElementById("cartype").selectedIndex; 

    var queryString = "?cartype=" + cartype; 
    ajaxRequest.open("GET", "your get data page .php" + queryString, true); 
    ajaxRequest.send(null); 
} 

//--> 
</script> 



<form action="" method="post" enctype="multipart/form-data"> 
        <div class="b-infoBar__select-one"> 
        <span class="b-infoBar__select-one-title">SORT BY</span> 
        <select name="cartype" id="cartype" onchange="myFunction()"> 
         <option value="" selected="">Select Car Type</option> 
         <!-- <?php 
          $query=mysql_query("select * from cartype"); 
          /* while($display=mysql_fetch_array($query))*/ 
           { 
         ?> --> 
         <option value="VOLVO">VOLVO</option> 
<!--       <?php 
          } 
         ?> --> 
        </select> 
       </div> 
      </form> 
<div id='ajaxDiv'>Your result will display here</div> 
</body> 
</html> 
+0

Я просто хочу знать, как выпадающие значения будут получены этим кодом? – Overseas

+0

@Overseas, когда вы выберете любое значение из раскрывающегося списка, оно перейдет к вашей «странице данных .php», написанной в моей функции ajax, и там вы получите данные о том, какой тип автомобиля вы выбрали, из выпадающего запроса .write чтобы получить данные, и отобразится на главной странице. , то есть

Your result will display here

+0

вы можете настроить код в соответствии с вашими требованиями. Я просто очистил концепцию получения данных с помощью ajax. –

Смежные вопросы