填充三重選擇幫助需要

Question

我有一個下拉列表觸發一個變化事件，通過jQuery和PHP填充第二個選擇列表。我需要做的是，當觸發第一個事件時，使用回調數據填充下拉列表2，並使用下拉列表2填充下拉列表3.我需要查詢2個表格company_com和我可以使用JOIN執行的部門，但是不知道如何根據查詢返回數據。

我已經發布了我目前使用的代碼，將不勝感激任何幫助，因爲我不知道要走什麼方向。非常感謝。

jQuery的變化事件代碼

$(function() { 
    $("#dstr_dept").change(function() { 
    $(this).after('<div id="loader"><imgages src="img/loading.gif" alt="loading files" /></div>'); 
    $.get('loadboxDstrsubcat.php?dstrdept=' + $(this).val(), function(data) { 
     $("#box_dstr").html(data); 
     $('#loader').slideUp(200, function() { 
     $(this).remove(); 
     $("#box_dstr").trigger("chosen:updated"); 
     }); 
    }); 
    }); 
}); 

PHP代碼

<?php 
session_start(); 
?> 

<?php 
    include('../Connections/domain.php'); 

    $dstrdept = $_GET['cltdstrdept']; 
    $customer = $_SESSION['kt_idcode_usr']; 

    mysql_select_db($database_domain, $domain); 
    $query = "SELECT name FROM departments WHERE code = '".$dstrdept."' ORDER BY name ASC"; 
    $result = mysql_query($query) or die (mysql_error()); 

    if (mysql_num_rows($result) > 0) { 

    echo "<script type=text/javascript>\n"; 
    echo "$(function() {\n"; 
    echo "$(\".noBdstrBoxes\").html('')\n"; 
    echo "$('#dstr_dept').attr('data-placeholder', \"Choose your dept...\").prop('disabled', false)\n"; 
    //echo "$(\"#box_dstr\").prop('disabled', false)\n"; 
    //echo "$('#Frtv').show()\n"; 
    echo "});\n"; 
    echo "</script>\n"; 

    // This returns the data of departments 
    while($row = mysql_fetch_array($result)) { 
    echo "<option value='$row[name]'>$row[name]</option>"; 
    }  

    } else { 

    echo "<script type=text/javascript>\n"; 
    echo "$(function() {\n"; 
    echo "$('.noBdstrBoxes').html('ERROR: There are no boxes to destroy in that dept. Please select another.').css({\"color\":\"red\", \"margin\": \"-6px 0 10px 22px\", \"font-size\": \"12px\", \"font-family\": \"Verdana, Geneva, sans-serif\"})\n"; 
    echo "$('#box_dstr').attr('data-placeholder', \"No boxes to display...\").prop('disabled', true)\n"; 
    echo "});\n"; 
    echo "</script>\n"; 

    //echo "<option value='No boxes in that dept'>No boxes in that dept</option>"; 

    } 
?> 

HTML代碼

<div class="fieldset"> 
      <h1><span>Select a Customer</span></h1> 
      <p> 
      <select data-placeholder="Choose a customer..." class="chosen-select" style="width:250px;" name="dstr_customer" id="dstr_customer"> 
       <option value=""></option> 
       <option value="DEMO">DEMO</option> 
       <option value="DEMO2">DEMO2</option> 
       <option value="DEMO3">DEMO2</option> 
       <option value="DEMO4">DEMO2</option> 
      </select> 
      <span></span> 
      <a href="javascript:void(0)" style="margin-left:10px;" class="tooltip" title="Please select a dept where the box to be destroyed is stored.">Help</a> 
      </p> 
     </div> 

<div class="fieldset"> 
      <h1><span>Select a Department</span></h1> 
      <p> 
      <select data-placeholder="Choose a dept..." class="chosen-select" style="width:250px;" name="dstr_dept" id="dstr_dept"> 
       <option value=""></option> 

      </select> 
      <span></span> 
      <a href="javascript:void(0)" style="margin-left:10px;" class="tooltip" title="Please select a dept where the box to be destroyed is stored.">Help</a> 
      </p> 
     </div> 

<div class="fieldset"> 
      <h1><span>Select an Address</span></h1> 
      <p> 
      <select data-placeholder="Choose an address..." class="chosen-select" style="width:250px;" name="dstr_address" id="dstr_address"> 
       <option value=""></option> 

      </select> 
      <span></span> 
      </p> 
     </div> 

<div class="fieldset"> 
      <h1><span>Select Your Box(es)</span></h1> 
      <p> 
      <select data-placeholder="Choose your box(es)..." class="chosen-select" name="box_dstr[]" id="box_dstr" multiple required="required"> 
       <option value=""></option> 
      </select> 
      <span></span> 
      <a style="margin-left: 12px;" href="javascript:void(0)" class="tooltip" title="Please select your boxes from the list. You can select a max of 20 boxes per submission.<br />.<br />You can select multiple boxes by holding the left ctrl on your keyboard and making your selection">Help</a> 
      </p> 
      <div class="noBdstrBoxes"></div> 
     </div> 

Answer 1

您可以使用PHP的頁面重新提交到服務器，然後使用該值從第一個選擇框用於查詢以填充下兩個選擇框。

或者您可以使用AJAX做同樣的事情，無需重新加載頁面。但是，然後你將不得不使用JavaScript來更改頁面上的2個選擇框。