【问题标题】:javascript - multiple dependent/cascading/chained select boxes on same formjavascript - 同一表单上的多个依赖/级联/链接选择框
【发布时间】:2011-01-25 22:04:21
【问题描述】:

我正在通过 jquery 和 json 填充选择框选项,但我不确定如何处理我的表单中相同链接选择框的多个实例。

因为选择框仅在需要时才呈现,所以某些记录将有十组链接选择框,而其他记录则只需要一个。如何生成唯一选择以支持辅助选择选项的自动填充?

这是我正在使用的代码,我提前感谢您提供的任何见解。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function populateACD() {
        $.getJSON('/acd/acd2json.php', {acdSelect:$('#acdSelect').val()},
function(data) {
                var select = $('#acd2');
                var options = select.attr('options');
                $('option', select).remove();
                $.each(data, function(index, array) {
                  options[options.length] = new Option(array['ACD2']);
                });
        });
}
$(document).ready(function() {
        populateACD();
        $('#acdSelect').change(function() {
                populateACD();
        });
});
</script>


<?php
require_once('connectvars.php');
$dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
$squery = "SELECT ACD1ID, ACD1 from ACD1";
$sdata = mysqli_query($dbc, $squery);
  // Loop through the array of ACD1s, placing them into an option of a select
echo '<select name="acdSelect" id="acdSelect">';
while ($row = mysqli_fetch_array($sdata)) {
echo "<option value=" . $row['ACD1ID'] . ">" . $row['ACD1'] . "</option>\n";
    }
  echo '</select><br /><br />';

<select name="acd2" id="acd2">
</select>

acd2json.php

<?php
$dsn = "mysql:host=localhost;dbname=wfn";
$user = "acd";
$pass = "***************";
$pdo = new PDO($dsn, $user, $pass);
$rows = array();
        if(isset($_GET['acdSelect'])) {
          $stmt = $pdo->prepare("SELECT ACD2 FROM ACD2 WHERE ACD1ID = ? ORDER BY ACD2");
          $stmt->execute(array($_GET['acdSelect']));
          $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
}
echo json_encode($rows);
?>

【问题讨论】:

  • 首先要做的就是停止给他们所有相同的“id”值。
  • 感谢您的开始...我应该能够通过 php 为他们提供唯一的 id 值,但是如何让 javascript 补偿被呈现的唯一选择的数量?跨度>

标签: javascript jquery json select chained


【解决方案1】:

如果您给每个“选择”(嗯,每个您需要控制的)一个“类”名称来标识它们,那么您可以设置一个处理程序来对所有这些进行更改,如下所示:

$('select.controlMe').click(function() {
  // ... whatever
});

您的选择元素如下所示:

<select name='paramName' class='controlMe'>

现在,如果&lt;select&gt; 元素需要与其他 &lt;select&gt; 元素有特定的关系,那么您必须有一种描述方式。您可以使用“元数据”jQuery 插件,以便可以注释选择元素本身(同样,在“类”值中),并且 Javascript 事件处理程序可以查看它。但是,我不确定您的代码是做什么的。

元数据插件在这里:http://plugins.jquery.com/project/metadata

【讨论】:

  • 再次感谢 Pointy,我是 javascript 菜鸟,所以您的回答超出了我的想象。我想更好地解释我想用这段代码做什么。与主记录相关的子项的表格列表。如果其中两个子项未定义(NULL),那么我需要用户为这些值做出两个选择。然而,第二个选择值取决于第一个,因此它是级联的或链接的,我已经看到它标记了几种不同的方式。当您说“如果 元素具有特定关系”时,这与依赖相同吗?
  • 我知道这不是你想读的……我只是要回到谷歌看看能不能在某个地方找到一个例子。
  • 是的,“关系”我认为我的意思与“依赖”的意思相同。关键是,一个&lt;select&gt; 使事情发生在另一个上,并且不知何故,代码需要知道哪个&lt;select&gt; 驱动哪个其他人。有很多不同的方法可以实现这一点 - 例如,您可以使用简单的命名约定。
  • 你说的很简单,但对我来说似乎很复杂。我明白你关于关系的观点,我让它在一组选择上工作,但说“你可以使用简单的命名约定,例如”。仍然不能帮助我理解如何在 javascript 中区分可以呈现的 x 数量的相关选择。我想我会聘请专家几个小时以我可以理解/理解的方式对其进行分解,这个世界上没有什么是免费的,我应该知道的。我非常感谢您今天抽出宝贵的时间。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-03-02
  • 2016-06-26
  • 2023-04-09
  • 2012-01-11
  • 2011-01-24
  • 2015-02-25
相关资源
最近更新 更多