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 code

<?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 CODE

<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个选择框。

填充所需的三重选择帮助

1 个答案: