1

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

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

我对任何 jQuery 代码都是全新的，我研究了很多示例，但是由于我不熟悉 JS 或 JQ 编码约定，所以我迷失在逻辑中，所以保持简单很重要，这样我才能理解内部发生的事情代码（我不仅在寻求帮助以使我的代码正常工作，而且我还可以学习和理解正在发生的事情）。

通过以下教程，我几乎完全找到了我想要实现的操作（除了下面“代码帮助”中解释的一个重要点）：http: //jqueryfordesigners.com/populate-select-boxes/。显示操作的示例页面在这里：http: //jqueryfordesigners.com/demo/select-boxes.html

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

任何人都可以帮助如何调整代码以实现这一目标吗？

谢谢

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

选择框.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>
4

0 回答 0