Question

问题：我有两个下拉框。使用jQuery，我想在选择第一个下拉框时填充第二个下拉框（帮助我现有的代码）。我在下面的jQuery代码中标记了我需要帮助的区域，并在“代码帮助”中解释了我想要实现的目标。

我意识到这是一个非常频繁请求的项目，我已经看到很多评论，这可以在简单的JS中完成，但因为已经有其他jQuery元素在页面上使用（不是由我编码）为简单起见，我想使用JQ。

我对任何jQuery代码都是全新的，我已经研究了很多例子，但由于我不熟悉JS或JQ编码约定，因此我迷失在逻辑中，因此保持简单是很重要的，所以我可以理解什么是发生在代码中（我不是只是寻求帮助以使我的代码正常工作，而且我也可以学习并理解正在发生的事情）。

通过遵循以下教程，我发现了几乎所有我希望实现的操作（ 除了下面的“代码帮助”中解释的一个重要点 ）：{{ 3}}。显示操作的示例页面位于：http://jqueryfordesigners.com/populate-select-boxes/

代码帮助：在本教程中，第二个下拉列表中填写了静态html文件的内容：$article.load('select-boxes-' + categoryName + '.html');
我需要根据第一个下拉列表中的选定值从JS变量$st_list和PHP变量$student_block填充第二个下拉列表，如下面的代码所示。

有人可以请求如何调整代码以实现这一目标吗？

谢谢

我的代码：
为简单起见，第一个下拉列表是静态的，带有简单的整数值，但是将在工作代码中的$test_seq中的DB中填充，其整数值与下面的示例代码相同（如果这很重要）。此外，在单独的PHP过程（稍后）中，$test_seq，$student_id和其他new variables将用于将数据发送回DB （仅供参考，但不包括与此请求相关）。

选择-boxes.php

$sql = "SELECT * FROM TBL_NAME";
$result = mysql_query($sql) or die(mysql_error());
while($row = mysql_fetch_array( $result ))
{
  $test_seq = $row['SEQ'];
  $student_id = $row['st_num'];
  $student_name = $row['st_name'];
  $student_block .= '<OPTION value="'.$student_id.'">'.$student_id.' - '.$student_name.'</OPTION>';
}

形式：

<form action="select-boxes.php">
<label for="test_day">Test day:</label>
   <select name="test_day" id="test_day">
    <option selected value="">&nbsp;</option>
    <option value="1">Day 1</option>
    <option value="2">Day 2</option>
    <option value="3">Day 3</option>
   </select>
<input type="submit" id="next" value="next &raquo;" />
</form>

jQuery的：

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
  $(document).ready(function () {
    var $test_day = $('#test_day'),
    $st_list = null;
    $test_day.change(function () {
      var test_dayVal = $test_day.val();
      if ($st_list == null) {
        $st_list = $('<select name="st_name" id="st_name"><?php echo $student_block; ?></select>').appendTo('form');
        $next.remove();
        $('form').append('<input type="submit" value="process &raquo;" />');
      }

      $st_list.load('#test_dayVal'); //<--I think this is where I need help.. What do I do here?

    });

    var $next = $('#next');

    $next[0].setAttribute('type', 'button');
  });
</script>

jQuery：基于第一个下拉列表的值从数组中的第二个下拉列表

0 个答案: