使用jQuery从HTML Select调用数据属性，该属性包括SQL查询以动态填充Classic ASP中的其他HTML输入

Question

大家好，祝大家圣诞节快乐。

根据标题，我认为您可以对我的问题有所了解。 老实说，我对经典ASP不太熟悉，但是由于在我的工作场所，他们仍然使用经典ASP，他们要求我编辑一些页面来为输入创建验证。 因此，我想用select替换一些输入，而select也动态填充其他输入。 但是，我在获取变量时有点问题。 因此，我听说过数据属性可以使用jQuery调用多个变量。

我正在使用：经典ASP和SQL Server 2008。

我的目标是当用户选择某项时，jQuery捕获所选选项的值， 并且还与该值相关的列（数据库）。

我将提供3个代码块，我认为它们在这里起着重要的作用。 尽管由于我已经包含了SQL查询，所以我可能无法在jsfiddle中提供。 （如果jsfiddle可以处理SQL，请道歉，因为我不知道。）

代码的第一块是我的SQL查询，它位于页面顶部：

<%
Dim Recordset5
Dim Recordset5_cmd
Dim Recordset5_numRows

Set Recordset5_cmd = Server.CreateObject ("ADODB.Command")
Recordset5_cmd.ActiveConnection = MM_GajiHari2_STRING
Recordset5_cmd.CommandText = "SELECT * FROM dbo.JBANK"
Recordset5_cmd.Prepared = true

Set Recordset5 = Recordset5_cmd.Execute
'arrRecordset5 = Recordset5.GetRows()
Recordset5_numRows = 0
%>

第二个是我的HTML代码，该代码可供选择，它具有基于我上面给出的SQL从数据库调用的值。

<td bgcolor="#D5D5FF" class="style3">
   <select name="kod_bank" type="text" class="style22  style26" id="kod_bank"/>
      <option value="" disabled selected>Sila Pilih Kod Bank</option>
        <%
        Dim a
        Dim b
        Dim c

        a = Recordset5.Fields.Item("jKod_Bank").Value
        b = Recordset5.Fields.Item("jNama_Bank").Value
        c = Recordset5.Fields.Item("jTotal_Digit").Value

        While (NOT Recordset5.EOF)
        %>

        <option value="<%=(Recordset5.Fields.Item("jKod_Bank").Value)%>" 
           data-bank="[5, 5, 5]">
           <%=(Recordset5.Fields.Item("jKod_Bank").Value)%> (<%=(Recordset5.Fields.Item("jNama_Bank").Value)%>)
        </option>


        <%
           Recordset5.MoveNext()
        Wend

        If (Recordset5.CursorType > 0) Then
           Recordset5.MoveFirst()
        Else
           Recordset5.Requery
        End If
        %>

  </select>
</td>
<td bgcolor="#D5D5FF" class="style3"><input name="nama_bank" type="text" class="style22  style26" id="nama_bank" size="50" maxlength="50" onkeyup="caps(this)" readonly="" /></td>
<td bgcolor="#D5D5FF" class="style3"><input name="no_akaun" type="text" class="style22 style26" id="no_akaun" size="30" /></td>

第三段代码是我的jquery 。

$(document).ready(function (){

   var getKodBank = document.getElementById("kod_bank");

   if(getKodBank != ""){

      $("#kod_bank").on("change", function(){
      //alert("test");
         $.each($("#kod_bank").attr("data-bank"), function(index, value){
           alert( index + ": " + value );
         });
      });
   }
});

注意

我试过像这样更改jQuery，然后警告它：

$.each([5, 5], function(index, value)

而且效果很好。 所以我认为我的SQL或HTML代码是问题所在。

另请注意，在HTML代码中，我具有如下数据属性：

data-bank="[5, 5, 5]"

这只是为了测试它是否具有正常值，但似乎根本不起作用。 无论如何，它应该是['a'，'b'，'c']，因为我的目标是调用数据库中的recordset5变量。

我的代码有什么问题？ 真。 请帮忙。

Answer 1

我想我可以在这里找到一些问题。

首先，您要对$(...).attr(...) $.each()上的$.each()进行调用，因为调用attr(...)或data(...) （在您的情况下更可取）只会为您提供集合中第一项的数据值。 您需要首先遍历元素， 然后在循环内获取每个元素的数据。 这很容易解决。 请注意，如果改用data(...) ，则会发现jQuery如果检测到属性的内容同样有效，它将自动将其解析为对象或数组（因此， [5,5,5]会自动转换为JS数组）。

其次，我注意到当您使用ASP生成option元素时，没有使用Server.HTMLEncode来安全地转义内容。 这意味着，如果您的数据中存在HTML特殊字符，特别是引号字符，则它将破坏HTML并可能导致XSS漏洞 。 对属性进行HTML编码将解决该问题。