如何使用服务器生成的数组中的值动态更新下拉列表选项

How to dynamically update drop-down list options with values in a server-generated array

本文关键字：动态 更新 选项 下拉列表 数组 何使用 服务器      更新时间：2023-09-26

我有一个带有两个下拉框的web表单，我正在寻找一种方法，根据第一个框的选择动态更新第二个框的选项。

第一个框表示数据类型，第二个框是与所选类型相关联的数据库列表。

我有基本的代码运行顺利在这里：

var TypeA_DbSuffixList = ['Test1', 'Test2', 'Test3'];
var TypeB_DbSuffixList = ['TestA', 'TestB', 'TestC'];
function fill_dbSuffixList(){
   document.getElementById("dbSuffixList").options.length = 0;
   var suffixMenu = document.getElementById("dbSuffixList");
   var dataFormat = document.getElementById("dataFormatType");
   var suffixList = dataFormat.value + "dbSuffixList";
   if (suffixList == 'TypeA_dbSuffixList') {
      for(index in TypeA_dbSuffixList) {
        suffixMenu.options[suffixMenu.options.length] = new Option(TypeA_dbSuffixList[index], index);
      }
   }
   if (suffixList == 'TypeB_dbSuffixList') {
      for(index in TypeB_dbSuffixList) {
        suffixMenu.options[suffixMenu.options.length] = new Option(TypeB_dbSuffixList[index], index);
      }
   } 
}

该代码（在dataType框中进行选择时激活）清除现有选项列表，并根据"dataFormatType"框的选定值重新填充列表。

我面临的问题是，数据库表的实际列表不是硬编码的，而是通过以下对服务器的调用生成的，以避免每次添加新数据库时重复编辑页面：

var TypeA_dbSuffixList = ${TypeA_dbSuffixList};
var TypeB_dbSuffixList = ${TypeB_dbSuffixList};

这些调用返回以下代码：

var TypeA_dbSuffixList = [Test1, Test2, Test3];
var TypeB_dbSuffixList = [TestA, TestB, TestC];

对于上面的代码，初始函数将类型数组中的每个条目视为未定义的变量，并且不会向下拉列表中写入任何内容。

如果我要添加

var Test1 = "Apple";
var Test2 = "Orange";
var Test3 = "Grape";

在TypeA的"for"循环之前，从dataType下拉列表中选择TypeA会返回"Apple"、"Orange"answers"Grape"作为TypeA的可用数据库。

从视觉上看，我看到了需要改变的地方。[Test1，Test2，Test3]返回值必须是[Test1'，'Test2'，'Test3']。我只是不确定该如何改变它，并且已经用尽了我能想到的每一个网络搜索。

有没有办法更改返回数组的格式，或者使用现有格式并将变量名作为下拉选择传递，而不是使用变量值？

非常感谢您的帮助。我也会继续自己寻找答案，如果我找到答案，我会把它贴在这里。

我认为最干净的解决方案是更改服务器端的代码，以生成一个正确的字符串JavaScript数组，其中的值用单引号或双引号括起来。

如果由于某种原因无法做到这一点，并且您想要一个纯JavaScript解决方案，那么我建议您将整个JSP/ASP/PHP变量（不确定您使用的是什么框架）用双引号括起来，用正则表达式去掉括号和空格字符串，然后用逗号作为分隔符将其拆分为字符串数组。

所以在你的JavaScript中，这个：

var TypeA_dbSuffixList = ${TypeA_dbSuffixList};

会变成这样：

var TypeA_dbSuffixList = "${TypeA_dbSuffixList}".replace(/['[']'s]/g,"").split(",");

我认为将服务器端语言中的数据转换为JavaScript中使用的数据的最佳方法是对对象进行JSON编码。

我不确定你在服务器上使用的是什么语言，但在PHP中你可以做以下

var arr = <?php echo json_encode( array ('abc', 'def', 'ghi') ); ?> ;

你的输出将是

var arr = ['abc', 'def', 'ghi'] ;

这将确保嵌入新行、制表符和引号的字符串正确转义。

JSP

您说您使用的是JSP，但您的代码看起来更像JSP中的速度或自由标记。在JSP中，只要下载Gson ，就可以使用以下内容

var TypeA_dbSuffixList = <%= new Gson().toJson(TypeA_dbSuffixList) %>;
相关文章：