javascript - 同一表单上的多个依赖/级联/链接选择框

发布于 2024-08-24 13:49:57 字数 1915 浏览 6 评论 0原文

我通过 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);
?>

I'm populating select box options via jquery and json but I'm not sure how to address multiple instances of the same chained select boxes within my form.

Because the select boxes are only rendered when needed some records will have ten sets of chained select boxes and others will only need one. How does one generate unique selects to support the auto population of secondary select options?

Here's the code I'm using, and I thank you in advance for any insight you may provide.

<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);
?>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

不打扰别人 2024-08-31 13:49:57

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

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

您的选择元素将看起来像像这样:

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

现在,如果 元素有特定的关系,那么您将必须有一种方式来描述这一点。您可以使用“元数据”jQuery 插件,以便可以对选择元素本身进行注释(同样,在“类”值中),并且 Javascript 事件处理程序可以查看它。但是,我不太确定您的代码的作用是什么。

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

If you give each "select" (well, each one that you need to control) a "class" name that identifies them as such, then you can set up a handler for changes to all of them like this:

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

Your select elements would look like this:

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

Now, if the <select> elements need to have specific relationships to other <select> elements, then you'll have to have a way of describing that. You could use the "metadata" jQuery plugin so that the select elements themselves could be annotated (again, in the "class" value) and the Javascript event handler could just look at that. I'm not exactly sure what it is that your code does, however.

The metadata plugin is here: http://plugins.jquery.com/project/metadata

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文