鏈式選擇框上的篩選結果

我已經制作了鏈式選擇框，即每個選擇框都依賴於除第一個選擇框之外的另一個選擇框。當頁面加載用戶選擇國家然後狀態選擇框得到填充，並在州選擇城市選擇框填充後。鏈式選擇框工作正常。
問題頁面載入時它有幾個結果，每個結果的選擇也應該得到過濾
EG：
1.當頁面加載混合查詢結果顯示在與此相關的國家的結果
2.1936國家選擇應該被顯示
3在與該國家和州相關的州選擇結果應該被顯示之後。鏈式選擇框上的篩選結果

這是我很stuck.someone幫助我走出
我的代碼是
HTML部分和jQuery

<select name="country" id="country"> 
    <option>select country</option> 
<?php 
    $sql = "SELECT * from plus2_country ORDER BY country ASC"; 
    $result = mysqli_query($conn,$sql) or die(mysqli_error($conn)); 
    $row_count = mysqli_num_rows($result); 
    if($row_count > 0) 
    { 
     while($row = mysqli_fetch_array($result)) 
     { 
      echo '<option value="'.$row['country_code'].'">'.$row['country'].'</option>'; 
     } 
    } 
    else 
    { 
     '<option value="">Country not available</option>'; 
    } 
?> 
</select> 
<select name="state" id="state"> 
    <option value="">Select country first</option> 
</select> 

<select name="city" id="city"> 
    <option value="">Select state first</option> 
</select> 
<br> 
<br> 
<br> 
<div id="results"> 
     <?php 
      $query1 = "SELECT * from content ORDER BY emp_name"; 
      $result = mysqli_query($conn,$query1) or die(mysqli_error($conn)); 
      $row_count = mysqli_num_rows($result); 
      if($row_count > 0) 
      { 
       while($row = mysqli_fetch_array($result)) 
       { 
     ?> 
        <div class="col-md-3 photo-grid " style="float:left"> 

         <div class="well well-sm"> 
          <h4><small><?php echo $row['emp_name']; ?></small></h4> 
         </div> 
        </div> 
     <?php 
       } 
      } 
     ?> 

<script type="text/javascript"> 
$(document).ready(function(){ 

$('#country').on('change',function(){ 
    var country_code = $(this).val(); 
    console.log(country_code); 
    if(country_code){ 
     $('#loadingmessage').show(); 
     $.ajax({ 
      type:'POST', 
      url:'dependent.php', 
      data:'country_code='+country_code, 
      success:function(html){ 
       console.log(html); 
       var $state_response = $(html); 
       var $result_response = $(html); 
       var state_option = $state_response.filter(".state_option").html(); 
       console.log(state_option); 
       var results = $result_response.filter("#result").html(); 
       console.log(results); 
       $('#state').html(html); 
       $('#city').html('<option value="">Select state first</option>'); 
       $('#results').html(html); 
       $('#loadingmessage').hide(); 
      } 
     }); 
    }else{ 
     $('#state').html('<option value="">Select country first</option>'); 
     $('#city').html('<option value="">Select state first</option>'); 
    } 
}); 
});

服務器端代碼

include 'dbconfig.php'; 
session_start(); 
if(isset($_POST["country_code"]) && !empty($_POST["country_code"])){ 
    $id = 1; 
$code = $_POST['country_code']; 
$code = mysqli_real_escape_string($conn,$code); 
$query = "SELECT * FROM plus2_state WHERE country_code = '$code' ORDER BY state ASC"; 
$result = mysqli_query($conn,$query) or die(mysqli_error($conn)); 
$rowCount = mysqli_num_rows($result); 
if($rowCount > 0){ 
    while($row = mysqli_fetch_array($result)){ 
     echo '<option class="state_option" value="'.$row['state_id'].'">'.$row['state'].'</option>';   
    } 
}else{ 
    echo '<option class="state_option" value="">State not available</option>'; 
} 
$query_1 = "SELECT * from content where country_code = '$code' ORDER BY emp_name ASC"; 
$result_1 = mysqli_query($conn,$query_1) or die(mysqli_error($conn)); 
$row_count = mysqli_num_rows($result_1); 
$_SESSION['result'] = array(); 
if($row_count > 0) 
{ 
    while($content_rows = mysqli_fetch_array($result_1)) 
    { 
     unset($_SESSION['result']); 
     echo "<div id='result'><div class='col-md-3 photo-grid' style = 'float:left'> 
      <div class = 'well well-sm'><h4><small>".$content_rows['emp_name']."</small></h4></div></div></div>"; 
      $_SESSION['result'][$id] = array('name' => $content_rows['emp_name']); 
    } 
} 
else 
{ 
    echo "<div class = 'result'>no results found</div>"; 
} 
$_SESSION['country_code'] = $code ; 
//print_r($_SESSION['result']); 
}

* * PS：**我應該使用多個阿賈克斯電話

編輯：我解決了使用多個Ajax調用
HTML和jQuery

<select name="category" id="category"> 
    <option>select category</option> 
<?php 
    $sql = "SELECT * from category_ref_table ORDER BY category_name ASC"; 
    $result = mysqli_query($conn,$sql) or die(mysqli_error($conn)); 
    $row_count = mysqli_num_rows($result); 
    if($row_count > 0) 
    { 
     while($row = mysqli_fetch_array($result)) 
     { 
      echo '<option value="'.$row['category_id'].'">'.$row['category_name'].'</option>'; 
     } 
    } 
    else 
    { 
     '<option value="">category not available</option>'; 
    } 
?> 
</select> 
<select name="department" id="department"> 
    <option value="">Select category first</option> 
</select> 

<select name="course" id="course"> 
    <option value="">Select dept. first</option> 
</select> 
<select name="subject" id="subject"> 
    <option value="">Select course first</option> 
</select> 
<br> 
<br> 
<br> 
<div class="results"> 
     <?php 
      $query1 = "SELECT * from data_table ORDER BY title"; 
      $result = mysqli_query($conn,$query1) or die(mysqli_error($conn)); 
      $row_count = mysqli_num_rows($result); 
      if($row_count > 0) 
      { 
       while($row = mysqli_fetch_array($result)) 
       { 
     ?> 
        <div class="col-md-3 photo-grid " style="float:left"> 

         <div class="well well-sm"> 
          <h4><small><?php echo $row['title']; ?></small></h4> 
         </div> 
        </div> 
       <?php 
       } 
      } 
     ?> 
     </div> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 
     $('#category').on('change',function(){ 
     var category_id = $(this).val(); 
     console.log(category_id); 
     if(category_id){ 
     $.ajax({ 
      type:'POST', 
      url:'dependent.php', 
      data:'category_id='+category_id, 
      success:function(html){ 
       console.log(html); 
       console.log(category_id); 
       $('#department').html(html); 
       $('#course').html('<option value="">Select department first</option>'); 
       $.ajax({ 
        type : 'POST', 
        url : 'results.php', 
        data : 'category_id='+category_id, 
        success : function(response) 
        { 
         console.log(response); 
         $('.results').html(response); 
        } 
       }); 
      } 
     }); 
    }else{ 
     $('#department').html('<option value="">Select category first</option>'); 
     $('#course').html('<option value="">Select department first</option>'); 
    } 
}); 

$('#department').on('change',function(){ 
    var departmentID = $(this).val(); 
    console.log(departmentID); 
    if(departmentID){ 
     $.ajax({ 
      type:'POST', 
      url:'dependent.php', 
      data:'dept_id='+departmentID, 
      success:function(html){ 
       console.log(html); 
       $('#course').html(html); 
       $('#subject').html('<option value="">Select course first</option>'); 
       $.ajax({ 
        type : 'POST', 
        url : 'results.php', 
        data : 'dept_id='+departmentID, 
        success : function(response) 
        { 
         console.log(response); 
         $('.results').html(response); 
        } 
       }); 
      } 
     }); 
    }else{ 
     $('#course').html('<option value="">Select department first</option>'); 
    } 
}); 

$('#course').on('change',function(){ 
    var courseId = $(this).val(); 
    console.log(courseId); 
    if(courseId) 
    { 
     $.ajax({ 
      type:'POST', 
      url : 'dependent.php', 
      data : 'course_id='+courseId, 
      success : function(html){ 
       console.log(html); 
       $('#subject').html(html) 
       $.ajax({ 
        type : 'POST', 
        url : 'results.php', 
        data : 'course_id='+courseId, 
        success : function(response) 
        { 
         $(".results").html(response); 
        } 
       }); 
      } 
     }); 
    } 
    else{ 
     $('#subject').html('<option value="">Select Course first</option>'); 
    } 
}); 
    $('#subject').on('change',function(){ 
    var subjectId = $(this).val(); 
    console.log(subjectId); 
    if(subjectId) 
    { 
     $.ajax({ 
      type:'POST', 
      url : 'results.php', 
      data : 'subject_id='+subjectId, 
      success : function(html){ 
       console.log(html); 
       $('results').html(html); 
      } 
     }); 
    } 
    else{ 
     $('#subject').html('<option value="">Select Course first</option>'); 
    } 
    }); 
    }); 
    </script>

dependent.php

<?php 
include 'ajax_filters/dbconfig.php'; 
session_start(); 
if(isset($_POST["category_id"]) && !empty($_POST["category_id"])){ 
$code = $_POST['category_id']; 
$query = "SELECT * FROM dept_ref_table WHERE category_id = '$code' ORDER BY dept_name ASC"; 
$result = mysqli_query($conn,$query) or die(mysqli_error($conn)); 
$rowCount = mysqli_num_rows($result); 
if($rowCount > 0){ 
    while($row = mysqli_fetch_array($result)){ 
     echo '<option value="'.$row['dept_id'].'">'.$row['dept_name'].'</option>';   
    } 
    }else{ 
    echo '<option value="">Departments not available</option>'; 
    } 
    } 

if(isset($_POST["dept_id"]) && !empty($_POST["dept_id"])){ 
$dept_id = $_POST['dept_id']; 
$code = $_SESSION['category_id']; 
$query = "SELECT * FROM course_ref_table WHERE dept_id = '$dept_id' ORDER BY course_name ASC"; 
$result = mysqli_query($conn,$query) or die(mysqli_error($conn)); 
$rowCount = mysqli_num_rows($result); 
if($rowCount > 0){ 
    echo '<option value="">Select Course</option>'; 
    while($row = mysqli_fetch_array($result)){ 
     echo '<option value="'.$row['course_id'].'">'.$row['course_name'].'</option>'; 
    } 
}else{ 
    echo '<option value="">Courses not available</option>'; 
    } 
    } 
    if(isset($_POST['course_id']) && !empty($_POST['course_id'])) 
    { 
    $course_id = $_POST['course_id']; 
    $category_id = $_SESSION['category_id']; 
    $dept_id = $_SESSION['dept_id']; 
    $query = "SELECT * FROM subject_ref_table WHERE course_id = '$course_id' ORDER BY subject_name ASC"; 
    $result = mysqli_query($conn,$query) or die(mysqli_error($conn)); 
    $rowCount = mysqli_num_rows($result); 
    if($rowCount > 0){ 
    echo '<option value="">Select Subject</option>'; 
    while($row = mysqli_fetch_array($result)){ 
     echo '<option value="'.$row['subject_id'].'">'.$row['subject_name'].'</option>'; 
    } 
}else{ 
    echo '<option value="">subjects not available</option>'; 
} 
} 
?>

results.php

它210

來源

2016-08-01 parvez

@GoetzPantanaü發送的鏈接是不是我想要的，鄰每個選擇我也希望篩選與該選擇的值的結果，對於例如：如果用戶選擇'america'所有與'america'有關的結果都應該出現 – parvez

thanx爲你的努力，我想要別的東西，無論如何我使用單個函數中的多個ajax調用它 – parvez

發佈了正確答案 – parvez

不需要多個ajax請求而不是單個請求。

$depart = $('#department'); 
$course = $('#course'); 
$subj = $('#subject'); 

$res = $('.results'); 
$('#category,#department,#course,#subject').change(function(){ 
     c = 'category', d = 'department', o = 'course', 
     ot = '<option value="">Select ', ct = ' first</option>'; 
     var s = 'subject', h = this, n = $(h).val(), k = h.id, 
     el = (k==c) ? d : (k==d) ? o : s, 
     jd =(k==c) ? {category_id:n} : (k==d) ? {dept_id:n} : 
     (k==o) ? {course_id:n} : {subject_id:n}; 
     console.log(k); 
     if(k!=s){ dynoDropdowns(h, '#'+el, jd); 
    } else { 
     showres(h, jd); 
    } 
}); 

function seldt(e,d){ 
e.html(d); 
} 

function dynoDropdowns(el, nxtElem, dataObj){ 
var k = el.id, eo = ot+o+ct; 
    if(k==c){ seldt($course, ot+d+ct); seldt($subj,eo); 
    } else { seldt($subj,eo); } 
    $.ajax({ 
     url:"op.php", 
     type:"post", 
     data:dataObj, 
     dataType:"json", 
     success:function(data){ console.log(data); 
     $(nxtElem).empty() 
        .append('<option disabled>Select..</option>'); 
      $.each(data.ye, function(i, obj){ 
       $('<option>', 
       { 
        value:obj.s, 
        text:obj.d 
       } 
       ).appendTo(nxtElem); 
      }); 
      eachres(data.pt); 
     } 
    }); 
} 

function eachres(d){ 
$res.empty(); 
     $.each(d, function(i, ab){ 
      $('<div>', 
      { 
      text:ab.nm 
      } 
     ).appendTo('.results'); 
     }); 
} 
function showres(currElem, dataObj){ 
     $.ajax({ 
     url:"op.php", 
     type:"post", 
     data:dataObj, 
     dataType:"json", 
     success:function(data){ console.log(data); 
      eachres(data.pt); 
     } 
     }); 
}

也將依賴和結果文件合併爲一個。

op.php

<?php session_start(); 
include'ajax_filters/dbconfig.php'; 
$code = $_POST['category_id']; // (int) $_POST['category_id']; 
$dept_id = $_POST['dept_id']; 
$course_id = $_POST['course_id']; 
$subject_id = $_POST['subject_id']; 

$query = ($code) ? 'SELECT*FROM dept_ref_table WHERE category_id = '$code' ORDER BY dept_name ASC' : 
     (($dept_id) ? 'SELECT*FROM course_ref_table WHERE dept_id = '$dept_id' ORDER BY course_name ASC' : 
     'SELECT*FROM subject_ref_table WHERE course_id = '$course_id' ORDER BY subject_name ASC'); 
$vs = ($code) ? 'dept_id' : (($dept_id) ? 'course_id' : 'subject_id'); 
$ds = ($code) ? 'dept_name' : (($dept_id) ? 'course_name' : 'subject_name'); 

if(isset($query) && !empty($query)){ 
$result = mysqli_query($conn,$query) or die(mysqli_error($conn)); // need prepared statement 
$h = mysqli_num_rows($result); 

while($r = mysqli_fetch_array($result)){ // or fetch_num 
$fil[] = (array('s' => $r[$vs], 'd' => $r[$ds])); 
} 

$qt = ($code) ? 'SELECT * from data_table where category_id = '$category_id' order by title ASC': 
     (($dept_id) ? 'SELECT * from data_table where category_id = '$category_id' and dept_id = '$dept_id' order by title ASC': 
     (($course_id) ? 'SELECT * from data_table where category_id = '$category_id' and dept_id ='$dept_id' and course_id = '$course_id' order by title ASC': 
     'SELECT * from data_table where category_id = '$category_id' and dept_id ='$dept_id' and course_id = '$course_id' and subject_id = '$subject_id' order by title ASC')); 
$result = mysqli_query($conn,$qt) or die(mysqli_error($conn)); // need prepared statement 

while($r = mysqli_fetch_array($result)){ 
$jar[] = (array('nm' => $r['title'])); 
} 
// json format. 
echo json_encode(array('ye' => ($h>0) ? $fil : '', 
         'pt' => ($h>0) ? $jar : '')); 
} 
?>

來源

2016-08-03 08:55:29

鏈式選擇框上的篩選結果

回答

相關問題