个人中心
gpt4 book ai didi

javascript - 在 JavaScript 中运行时访问数组列表中的特定对象

转载 作者：行者123 更新时间：2023-12-03 09:05:25 25 4
gpt4 key购买 nike

我将一个数组列表从 Controller 传递到此 homepage.jsp。我使用 jSTL 标签显示值。

<c:forEach items="${orgList}" var="item">
<tr>
 <td>
    <input type="radio" class="rbutton" name="chooseOrg" value="${item.orgId}">&nbsp&nbsp&nbsp
    <a href="http://localhost:8080/SpringDemo/deptPage/${item.orgId}">
    <c:out value="${item.orgName}" /></a>
 </td>
 <td>
    <c:out value="${item.orgDesc}" />
 </td>
</tr>

这是我正在迭代的代码。它显示得非常好。我想要这些值在 javascript 中的其他地方。这是我到目前为止尝试过的:

    var radioButtons = $("#orgDisplayForm input:radio[name='chooseOrg']");
    var totalFound = radioButtons.length;
    var checkedRadioButton = radioButtons.filter(':checked');
    var selectedIndex = radioButtons.index(checkedRadioButton);

selectedindex 为我提供了 arraylist 的正确索引。我使用警报对其进行了检查。但是下面的警报始终给出 arrayList orgList 中的第一个值。 

    alert("${orgList.get(selectedIndex).orgName}");
    $("#updateName").val("${orgList.get(selectedIndex).orgName}");

我的动机是获取 selectedIndex 并从 arralist orgList 中获取相应的组织名称，并将其设置为 id 为“updateName”的输入字段。期待帮助。

供引用的完整代码为:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style>
html,body {
    width: 100%;
}
#insertPopUp,#updatePopUp {
    display:none;
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>


$(document).ready(function(){
 /*    $("#insertPopUp").hide();    in css its display had to be made none*/



 $("#insert").click(function(){

     $("#insertPopUp").dialog({
            autoOpen:false,
            show: 'slide',
            resizable: false,
            position:"relative",
            stack: true,
            height: 'auto',
            width: 'auto',
            modal:true
        }); 
        $("#insertPopUp").dialog("open");
});

$("#popUpSave").click(function(){
    $.ajax({  
          type : 'POST',  
          url : "http://localhost:8080/SpringDemo/insertOrganization/"
          +"?insertName="+$("#insertName").val()
                  +"&insertDescription="+$("#insertDescription").val(), 
          success : function(){
              $("#insertPopUp").dialog("close");
              window.location.href="http://localhost:8080/SpringDemo/homePage";
          }       

      });
}); 


$("#delete").click(function(){  
    //to get the index of the selected option in a radio button group

    /* var radioButtons = $("#orgDisplayForm input:radio[name='chooseOrg']");
    // this should contain the count of all your radio buttons
    var totalFound = radioButtons.length;
    // this should contain the checked one
    var checkedRadioButton = radioButtons.filter(':checked');
    // this should get the index of the found radio button based on the list of all
    var selectedIndex = radioButtons.index(checkedRadioButton);
    alert(selectedIndex); */



    // to get value of the selected option in a radio button group    
    var orgid = $("#orgDisplayForm input[name='chooseOrg']:checked").val();
    $.ajax({  
        type : 'POST',  
        url : "http://localhost:8080/SpringDemo/deleteOrganization/" +"?orgid="+orgid, 
        success : function(){
          window.location.href="http://localhost:8080/SpringDemo/homePage";
        }         
    }); 
});


$("#update").click(function(){
    debugger;
    var orgid = $("#orgDisplayForm input[name='chooseOrg']:checked").val();
    $("#updatePopUp").dialog({
        autoOpen:false,
        show: 'slide',
        resizable: false,
        position:"relative",
        stack: true,
        height: 'auto',
        width: 'auto',
        modal:true
    }); 
    $("#updatePopUp").dialog("open");

    var radioButtons = $("#orgDisplayForm input:radio[name='chooseOrg']");
    // this should contain the count of all your radio buttons
    var totalFound = radioButtons.length;
    // this should contain the checked one
    var checkedRadioButton = radioButtons.filter(':checked');
    // this should get the index of the found radio button based on the list of all
    var selectedIndex = radioButtons.index(checkedRadioButton);
    /* alert("${selectedIndex}"); */
    /* var name = ${orgList};
    <c:out value="${colors[0]}"/> */
    /* $("#updateName").text($orgList[selectedIndex].orgName); */
    /* alert("<c:out value="${orgList[0].orgName}"/>");  */
    /* $("#updateName").text("<c:out value="${orgList[0].orgName}"/>");  */
    /* alert("<c:out value="${orgList.get(selectedIndex).orgName}"/>");
    alert("${orgList.get(selectedIndex).orgName}"); */


    //$("#updateName").val("${orgList.get(selectedIndex)}"); 
    $("#updateName").val("${orgList.get(selectedIndex)}");


    <%-- alert("${orgList.get(2).orgName}");
    $("#updateName").text(<%=${orgList.get(i)}%>) --%>; 



    /* $("#updateDescription").text(${orgList[selectedIndex].orgDesc}); */

});

$("#popUpUpdate").click(function(){


    var orgid = $("#orgDisplayForm input[name='chooseOrg']:checked").val();
    $.ajax({  
          type : 'POST',  
          url : "http://localhost:8080/SpringDemo/updateOrganization/"
          +"?updateName="+$("#updateName").val()
                  +"&updateDescription="+$("#updateDescription").val()
                  +"&orgid="+orgid, 
          success : function(){
              $("#updatePopUp").dialog("close");
              window.location.href="http://localhost:8080/SpringDemo/homePage";
          }       

      });
});

});

</script>

</head>
<body>
<br>
<br>
<br>
     <form:form id="orgDisplayForm">
        <table align="center" width="60%">
            <col width="30%">
            <col width="30%">
            <tr>
                <th align="left">Organization Name</th>
                <th align="left">Description</th>
            </tr>

            <c:forEach items="${orgList}" var="item">
                <tr>
                    <td>
                    <input type="radio" class="rbutton" name="chooseOrg" value="${item.orgId}">

                    &nbsp&nbsp&nbsp
                    <%-- <a  id ="deptAnchor" onclick=clickOrg(${item.orgId}) href="http://localhost:8080/SpringDemo/deptPage/"+${item.orgId}> --%>

                    <a href="http://localhost:8080/SpringDemo/deptPage/${item.orgId}">
                    <c:out value="${item.orgName}" /></a>
                    </td>
                    <td><c:out value="${item.orgDesc}" /></td>
                </tr>
                <tr><td></td><td></td></tr>
            </c:forEach>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr>

             <td><button type="button" id="insert">Insert</button>&nbsp&nbsp&nbsp<button type="button" id= "update">Update</button>&nbsp&nbsp&nbsp<button type="button" id="delete">Delete</button></td>
            </tr>
        </table>

        <div id="insertPopUp">
        <form:form method="POST" action="/insertOrganization">
        <p><label for="name">Organization name</label><p><input type="text" name="name" id="insertName" /></p></p>
        <p><label for="description">Organization description</label><p><input type="text" name="description" id="insertDescription" /></p></p>
        <button type="submit" id="popUpSave">Save</button>      
        </form:form>
        </div>


        <div id="updatePopUp">
        <p><label for="name">Organization name</label><p><input type="text" name="name" id="updateName" /></p></p>
        <p><label for="description">Organization description</label><p><input type="text" name="description" id="updateDescription" /></p></p>
        <button type="submit" id="popUpUpdate">Update</button>      
        </div>


    </form:form> 
</div>

</body>

最佳答案

我想说问题出在这部分:

alert("${orgList.get(selectedIndex).orgName}");
$("#updateName").val("${orgList.get(selectedIndex).orgName}");

在这里，您尝试混合两件事 - 服务器端 JSP 代码 (${orgList.get(selectedIndex).orgName}) 和 浏览器端 Javascript。服务器端代码在生成 HTML 时评估一次，此时 selectedIndex 值可能为 0，这将为您提供 orgList 第一个元素的 orgName 值。然后该值出现在 JavaScript 代码中，由浏览器处理。

我会尝试添加一个 JavaScript 数组，其中包含 orgList 中所需的值:

<script>
  var jsOrgList = [];
  var jsItem;
</script>
<c:forEach items="${orgList}" var="item">
  // your HTML code to generate table rows
  <script>
  jsItem = new Object();
  jsItem.orgName = '${item.orgName}';
  jsItem.orgDesc = '${item.orgDesc}';
  // ... etc., all properties needed for browser-side processing
  jsOrgList.push(jsItem);
  </script>
</c:forEach>

然后您可以在 Javacsript 中使用 jsOrgList 数组。

免责声明:上面的代码应该被认为是一个快速而肮脏的黑客，有更好的方法将后端值获取到前端。

关于javascript - 在 JavaScript 中运行时访问数组列表中的特定对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32201596/

25 4 0
文章推荐： javascript - AJAX PHP 视频上传并转换为 flv
文章推荐： javascript - 我使用的文本框只允许输入两位数字(即 1-99)。输入文本框时应限制除 1-99 之外的所有其他键
文章推荐： javascript - 在 div 位置渲染 cytoscape 图
文章推荐： javascript - AngularJS Controller 在初始化之前需要从 $http 获取数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com