碼上快樂

相關內容    簡體    繁體

HTML------5.二級聯動+多選框

本文轉載自   查看原文   2017-04-25 09:29   3911    html

界面效果

 

先添加復選框：

提交在一個form 里 struts action 傳值

一級選擇

js判定

 

 

使用 ajax 調用 url   返回值 至select 下拉選框中

param.js

 

    UrlParm = function() { // url參數    
      var data, index;    
      (function init() {    
        data = [];    
        index = {};    
        var u = window.location.search.substr(1);    
        if (u != '') {    
          var parms = decodeURIComponent(u).split('&');    
          for (var i = 0, len = parms.length; i < len; i++) {    
            if (parms[i] != '') {    
              var p = parms[i].split("=");    
              if (p.length == 1 || (p.length == 2 && p[1] == '')) {// p | p=    
                data.push(['']);    
                index[p[0]] = data.length - 1;    
              } else if (typeof(p[0]) == 'undefined' || p[0] == '') { // =c | =    
                data[0] = [p[1]];    
              } else if (typeof(index[p[0]]) == 'undefined') { // c=aaa    
                data.push([p[1]]);    
                index[p[0]] = data.length - 1;    
              } else {// c=aaa    
                data[index[p[0]]].push(p[1]);    
              }    
            }    
          }    
        }    
      })();    
      return {    
        // 獲得參數,類似request.getParameter()    
        parm : function(o) { // o: 參數名或者參數次序    
          try {    
            return (typeof(o) == 'number' ? data[o][0] : data[index[o]][0]);    
          } catch (e) {    
          }    
        },    
        //獲得參數組, 類似request.getParameterValues()    
        parmValues : function(o) { //  o: 參數名或者參數次序    
          try {    
            return (typeof(o) == 'number' ? data[o] : data[index[o]]);    
          } catch (e) {}    
        },    
        //是否含有parmName參數    
        hasParm : function(parmName) {    
          return typeof(parmName) == 'string' ? typeof(index[parmName]) != 'undefined' : false;    
        },    
        // 獲得參數Map ,類似request.getParameterMap()    
        parmMap : function() {    
          var map = {};    
          try {    
            for (var p in index) {  map[p] = data[index[p]];  }    
          } catch (e) {}    
          return map;    
        }    
      }    
    }();

jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>后台系統</title>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="Style/Style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript"
    src="http://121.41.47.176/tbmj/js/param.js"></script>
<script type="text/javascript"
    src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
</head>
<script type="text/javascript">
    function selectUser() {
        //獲取選項
        var type = document.getElementById('usertype');
        //0：經銷商:1：代理商
        var index = type.selectedIndex;
        //alert("選項id:" + index);
        if(index == 0){
            var accountSel = document.getElementById("accountNum");
            var opt = document.createElement("OPTION"); //創建option對象
            opt.text = "哈哈";
            //opt.text = 哈哈+"--"+1234;
            //alert("opt.text:"+opt.text);
            //指定新創建元素的text屬性值
            opt.value = "67";
            //opt.value = 1;
            //指定新創建元素的value屬性值
            accountSel.add(opt); //為select元素添加option
        }
        
        else {

            $.ajax({

                url : "http://114.55.74.89/dapail/worker/agentList.action",
                type : "POST",
                dataType : "json",
                data : {},
                success : function(data) {
                    if (true == true) {
                        var dataArray = eval(data.data.agentItems);
                        var accountSel = document.getElementById("acc");

                        //alert("_citySel:"+_citySel);
                        alert("長度:" + dataArray.length);
                        for ( var i = 0; i <2 ; i++) { //遍歷XML數據並給select元素添加選項

                            var opt = document.createElement("OPTION"); //創建option對象
                            opt.text = dataArray[i].NAME + "--"
                                    + dataArray[i].ACCOUNT;
                            //opt.text = 哈哈+"--"+1234;
                            //alert("opt.text:"+opt.text);
                            //指定新創建元素的text屬性值
                            opt.value = dataArray[i].ACCOUNT_ID;
                            //opt.value = 1;
                            //指定新創建元素的value屬性值
                            accountSel.add(opt); //為select元素添加option
                        }

                    } else {
                        alert(data.msg);
                    }
                },

            });
        }

        document.getElementById("setfocus").value = "";
    }
    function newChg() {
        document.getElementById("setfocus").value = "請輸入關鍵字";
    }
</script>
<body>
    <center>
        <table width="900" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td height="60" bgcolor="#E6F5FF"
                    style="color: #06F; font-size: 19px; font-weight: bolder; padding-left: 50px;">后台系統</td>
            </tr>
            <tr>
                <td height="30" background="Images/MenuBg.jpg">&nbsp;</td>
            </tr>
            <tr>
                <td height="500" align="center" valign="top"><table width="900"
                        border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="191" height="500" align="center" valign="top"
                                background="Images/leftbg.jpg"><%@ include file="left.jsp"%>
                            </td>
                            <td width="709" align="center" valign="top" bgcolor="#F6F9FE"><table
                                    width="709" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td height="30" background="Images/mainMenuBg.jpg"
                                            style="padding-left: 25px;">機器管理</td>
                                    </tr>
                                    <tr>
                                        <td height="470" align="center" valign="top" bgcolor="#F6F9FE">
                                            <form name="form1" method="post"
                                                action="MachineAction.action?page=0&setNum=0">
                                                <table width="100%%" border="0" cellspacing="0"
                                                    cellpadding="0">
                                                    <tr>
                                                        <td width="28%" height="30" style="padding-left: 20px;">
                                                            功能導航：</td>
                                                        <td width="72%">查詢： <input name="MACHINE_ID"
                                                            type="text" class="text1" id=MACHINE_ID> <input
                                                            type="submit" name="button" id="button" value="點擊查詢"></td>
                                                    </tr>
                                                </table>
                                            </form>
                                            <form name="form" method="post"
                                                action="MachineAccountSaveAction.action">
                                                <table width="100%" border="0" cellspacing="0"
                                                    cellpadding="0">
                                                    <tr align="center" class="t1">
                                                        <td height="25" bgcolor="#D5E4F4"><strong>選擇</strong></td>
                                                        <td height="25" bgcolor="#D5E4F4"><strong>機器id</strong></td>
                                                        <td bgcolor="#D5E4F4"><strong>機器狀態</strong></td>
                                                        <td bgcolor="#D5E4F4"><strong>出廠日期</strong></td>
                                                        <td bgcolor="#D5E4F4"><strong>操作</strong></td>
                                                    </tr>
                                                    <s:iterator id="aa" value="machine">
                                                        <tr align="center">
                                                            <td><input name="mach" type="checkbox"
                                                                value="${MACHINE_ID}" /></td>
                                                            <td height="25" align="center">${MACHINE_ID}</td>
                                                            <td>${MACHINE_STATE}</td>
                                                            <td>${PRODUCTION_DATE}</td>
                                                            <td align="center"><a
                                                                href="MachineDetailAction.action?MACHINE_ID=${MACHINE_ID}&accountId=${accountId}">詳情</a>
                                                                <a
                                                                href="MachineOrderAction.action?MACHINE_ID=${MACHINE_ID}&accountId=${accountId}">機器訂單</a>
                                                        </tr>
                                                    </s:iterator>
                                                </table>
                                                <table>
                                                    <tr>
                                                        <td height="30" align="right" class="STYLE2">身份：</td>
                                                        <td align="left"><select name="usertype" id="usertype"
                                                            onblur="selectUser()">
                                                                <option value="0">經銷商</option>
                                                                <option value="1">代理商</option>
                                                        </select></td>
                                                    </tr>
 <tr>
                                                        <td>賬戶列表：</td>
                                                        <td><select name="accountNum" id="accountNum" >
                                                        <!-- <option value="0">哈哈</option>
                                                        <option value="1">哈</option> -->
                                                        </select></td>
                                                        <td><input type="submit" name="button" id="button"
                                                            value="分配機器"></td>
                                                    </tr>
                                                </table>
                                            </form>
                                        </td>

                                    </tr>
                                    <tr align="center" class="t1">
                                        <td>
                                            <%
                                                if (!session.getAttribute("setNum").toString().equals("0")) {
                                            %> <a href="MachineAction.action?page=1">上一頁</a> <%
     }
 %> <a href="MachineAction.action?page=2">下一頁</a>
                                        </td>
                                    </tr>
                                </table></td>
                        </tr>
                    </table></td>
            </tr>
            <tr>
                <td height="35" background="Images/bootBg.jpg">&nbsp;</td>
            </tr>
        </table>

    </center>
</body>
</html>

 

 action:

package com.action;

import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import org.apache.struts2.ServletActionContext;

import com.bean.Account;
import com.bean.Cash;
import com.bean.Machine;
import com.opensymphony.xwork2.ActionSupport;
import com.util.TimeToDataToStringUtil;
import com.util.UrlUtil;

/**
 * 機器列表
 * @author Administrator
 *
 */
public class MachineAction extends ActionSupport{
    private List<Machine> machine;

    //代理商賬戶列表
    private List<Account> accountList;

    private String setNum;

    private String accountId; //賬戶id

    private String MACHINE_ID;

    private String page;// 1.上一頁 2.下一頁

    private String mach; 

    public String getAccountId() {
        return accountId;
    }

    public void setAccountId(String accountId) {
        this.accountId = accountId;
    }

    public List<Machine> getMachine() {
        return machine;
    }

    public void setMachine(List<Machine> machine) {
        this.machine = machine;
    }

    public String getSetNum() {
        return setNum;
    }

    public void setSetNum(String setNum) {
        this.setNum = setNum;
    }

    public String getMACHINE_ID() {
        return MACHINE_ID;
    }

    public void setMACHINE_ID(String mACHINE_ID) {
        MACHINE_ID = mACHINE_ID;
    }



    public String getPage() {
        return page;
    }

    public void setPage(String page) {
        this.page = page;
    }


    public String getMach() {
        return mach;
    }

    public void setMach(String mach) {
        this.mach = mach;
    }

    
    
    
    public List<Account> getAccountList() {
        return accountList;
    }

    public void setAccountList(List<Account> accountList) {
        this.accountList = accountList;
    }

    @Override
    public String execute() throws Exception {
        // TODO Auto-generated method stub
        HttpServletResponse response=null;
        response=ServletActionContext.getResponse();
        response.setContentType("text/html;charset=UTF-8");
        response.setCharacterEncoding("UTF-8");
        PrintWriter out=response.getWriter();

        System.err.println(mach);

        //創建session對象
        HttpSession session=ServletActionContext.getRequest().getSession();
        if (session.getAttribute("id")==null) {
            out.print("<script lanaguage='javascript'>alert('請重新登錄');window.location='login.jsp';></script>");
            out.flush();
            out.close();
            return null;
        }

        if (page.equals("0")) {
            if (setNum.equals("0")) {
                session.setAttribute("setNum", setNum);
            }
        }
        //上一頁
        if (page.equals("1")) {
            setNum=String.valueOf(Integer.valueOf(session.getAttribute("setNum").toString())-1);
        }
        //下一頁
        else if(page.equals("2"))
        {
            setNum=String.valueOf(Integer.valueOf(session.getAttribute("setNum").toString())+1);
        }

        session.setAttribute("setNum", setNum);

        //所有機器
        String url="tbmj/machine/query.action?accountId=6&MACHINE_ID="+MACHINE_ID+"&setNum="+setNum+"";
        JSONObject salerJson=JSONObject.fromObject(UrlUtil.getUrl(url));
        String data=salerJson.get("data").toString();
        JSONObject jsonData=JSONObject.fromObject(data);
        JSONArray machinejson = JSONArray.fromObject(jsonData.get("machine").toString());
        List<Machine> ma=new ArrayList<Machine>();
        if(machinejson.size()>0){
            for(int i=0;i<machinejson.size();i++){
                Machine machine=new Machine();
                JSONObject job = machinejson.getJSONObject(i);  // 遍歷 jsonarray 數組，把每一個對象轉成 json 對象
                machine.setMACHINE_ID(job.get("MACHINE_ID").toString());//得到 每個對象中的屬性值
                machine.setMACHINE_FEE(job.get("MACHINE_FEE").toString());//得到 每個對象中的屬性值
                machine.setMACHINE_STATE(job.get("MACHINE_STATE").toString());
                machine.setQR_CODE(job.get("QR_CODE").toString());
                machine.setTOTAL_PLAY_NO(job.get("TOTAL_PLAY_NO").toString());
                machine.setOVER_PLAY_NO(job.get("OVER_PLAY_NO").toString());
                machine.setTEST_NO(job.get("TEST_NO").toString());
                machine.setPRODUCTION_DATE(job.get("PRODUCTION_DATE").toString());
                machine.setREAL_TIME_NO(job.get("REAL_TIME_NO").toString());
                machine.setAccountId(accountId);
                ma.add(machine);
            }
        }
        machine=ma;
        
        //所有賬戶
        String url1="dapail/worker/agentList.action?";
        JSONObject accountJson=JSONObject.fromObject(UrlUtil.getUrl(url1));
        String accountdata=accountJson.get("data").toString();
        JSONObject accountjsonData=JSONObject.fromObject(accountdata);
        JSONArray fileItemsjson = JSONArray.fromObject(accountjsonData.get("agentItems").toString());
        List<Account> ac=new ArrayList<Account>();
        if(fileItemsjson.size()>0){
            for(int i=0;i<fileItemsjson.size();i++){
                Account account=new Account();
                JSONObject job = fileItemsjson.getJSONObject(i);  // 遍歷 jsonarray 數組，把每一個對象轉成 json 對象
                account.setACCOUNT_ID(job.get("ACCOUNT_ID").toString());//得到 每個對象中的屬性值
                account.setNAME(job.get("NAME").toString());
                account.setACCOUNT(job.get("ACCOUNT").toString());
                ac.add(account);
            }
        }
        accountList=ac;
        
        return SUCCESS;
    }

}

utilUrl:

package com.util;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import com.google.gson.JsonIOException;
import com.google.gson.JsonSyntaxException;
/**
 * 接收url 並處理 json 數據
 * @author Administrator
 *
 */
public class UrlUtil {
    
    private static String LINKURL="http://114.55.74.89/";
    //private static String LINKURL="http://192.168.1.212:8080/";
    public static String getUrl(String url)
    {
        String resData = null;
        StringBuffer s = new StringBuffer();
        BufferedReader bReader = null;
        try {
            //114.55.248.182
            URL urlWeb = new URL(LINKURL+url);
            URLConnection connection = urlWeb.openConnection();
            bReader = new BufferedReader(new InputStreamReader(connection.getInputStream(), "utf-8"));
            while (null != (resData = bReader.readLine())) {
                s.append(resData);
            }
            bReader.close();
        } catch (MalformedURLException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        System.out.println(s);
        return s.toString();
    }
    
    public static void main(String[] args) {
        //測試請求的 json 數據
        //System.out.println(getUrl("rubOrder.action?wor_id=5&order_id=100"));
        String s=getUrl("rubOrderRoom.action?wor_id=3&is_system=0");
        try {
            //net.sf.json.jsonobject 沒有 new JSONObject(String)的構造方法
            JSONObject json = JSONObject.fromObject(s.toString());
            
            //success
            //Boolean data=(Boolean) json.get("success");
            
            String data=json.getString("data");
            System.out.println(data);
            JSONObject jsonData=JSONObject.fromObject(data);
            
            
            System.out.println(jsonData.get("data").toString());
            //String str = "[{name:'a',value:'aa'},{name:'b',value:'bb'},{name:'c',value:'cc'},{name:'d',value:'dd'}]" ;  // 一個未轉化的字符串
            JSONArray bjson = JSONArray.fromObject(jsonData.get("data").toString() ); // 首先把字符串轉成 JSONArray  對象
            if(bjson.size()>0){
                for(int i=0;i<bjson.size();i++){
                    JSONObject job = bjson.getJSONObject(i);  // 遍歷 jsonarray 數組，把每一個對象轉成 json 對象
                    System.out.println(job.get("problem_description")+"****"+job.get("order_id")) ;  // 得到 每個對象中的屬性值
                }
            }
        } catch (JsonIOException e) {
            e.printStackTrace();
        } catch (JsonSyntaxException e) {
            e.printStackTrace();
        }
    }
}

struts 配置：

 

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 html 二級聯動（省市聯動） HTML--JS 二級聯動 vba實現excel二級聯動多選功能 Android之單復選框及Spinner實現二級聯動 js 二級聯動 MVC 二級聯動 Html.DropDownListFor() 二級聯動 （$.getJSON） ##uniapp 二級聯動 Ajax二級聯動 layui 二級聯動
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM