ajax实现下拉框与表格中的单选按钮联动,数据从数据库中查出

js:

$(function() {
    $('#userType').change(function() {
        var userType = $(this).val();
        $("input[type=radio]").attr("checked", false);
        ajaxForAccessTypeChanged(userType, false);
    });
    var userType = $('#userType').val();
    ajaxForAccessTypeChanged(userType, false);    //当下拉框的值改变时,调用下面的方法
});

function ajaxForAccessTypeChanged(userType) {
    $.ajax({
        url : 'a_usr_s01_SelectedUserTypeAjaxBL.do',
        type : 'post',
        data : {
            'userType' : userType
        },
        success : function(data, textStatus) {
            if (data == null || data == "")
                return;
            var dataObj = eval("(" + data + ")");
            $.each(dataObj.userTypeAccess, function(idx, item) {
                if (item == null || item == "")
                    return;
                $(
                        "#function_" + item.function_code + " input[value=" + item.accessType + "]").attr("checked", true);
            });
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert("An error has occurred: " + textStatus);
        }
    });
}

jsp:

<logic:iterate id="listFunction" name="listFunction" scope="request">
            <tr id="function_<bean:write name="listFunction" property="idFunction"/>">
                <td class="tdLeft">
                    <bean:write name="listFunction" property="moduleName" />
                    <html:hidden name="listFunction" property="idModule" indexed="true" />
                </td>
                <td class="tdLeft">
                    <bean:write name="listFunction" property="functionName" />
                    <html:hidden name="listFunction" property="idFunction" indexed="true" />
                </td>
                <td class="colAccessType">
                    <html:radio styleId="radio" name="listFunction" property="accessType" indexed="true" value="F" />
                </td>
                <td class="colAccessType">
                    <html:radio styleId="radio" name="listFunction" property="accessType" indexed="true" value="V" />
                </td>
                <td class="colAccessType">
                    <html:radio styleId="radio" name="listFunction" property="accessType" indexed="true" value="X" />
                </td>
            </tr>
        </logic:iterate>

BLogic:

/**
 * @(#)A_USR_S01_SelectedUserTypeAjaxAction.java
 *
 * HMSB Online Service Booking System
 *
 * Version 1.00
 *
 * Created 2012-11-16
 *
 * Copyright (c) 2012 Honda Malaysia. All rights reserved.
 */
package my.com.honda.servicebooking.a_usr.action;

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

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import my.com.honda.servicebooking.a_usr.dto.A_USR_S01_UserTypeAccess;

import jp.terasoluna.fw.dao.QueryDAO;
import jp.terasoluna.fw.service.thin.BLogicResult;
import jp.terasoluna.fw.web.struts.actions.AbstractBLogicAction;

/**
 * @author i-fannch
 *
 */
public class A_USR_S01_SelectedUserTypeAjaxAction<P>
    extends AbstractBLogicAction<P> {
   
    private QueryDAO queryDAO;

    /* (non-Javadoc)
     * @see jp.terasoluna.fw.web.struts.actions.AbstractBLogicAction#doExecuteBLogic(java.lang.Object)
     */
    public BLogicResult doExecuteBLogic(P arg0) throws Exception {
        BLogicResult res = new BLogicResult();
        return res;
    }
   
    protected void postDoExecuteBLogic(HttpServletRequest request,
            HttpServletResponse response, P params, BLogicResult result)
            throws Exception {
        String userType = request.getParameter("userType");
        if(userType==null||userType.trim().length()<=0)
            return;
       
        List<A_USR_S01_UserTypeAccess> list = queryDAO.executeForObjectList("SELECT.A_USR.GET_LIST_ACCESSTYPE", userType);
       
        if(list!=null&&list.size()>0) {
            PrintWriter out = response.getWriter();            
            String json="{userTypeAccess: [";
            for(A_USR_S01_UserTypeAccess ut : list)
                json  += "{function_code: '"+ ut.getIdFunction() +"', accessType: '"+ ut.getAccessType() +"'},";
            json.substring(0, json.length()-1);
            json += "]}";
            out.print(json);
            out.close();
        }
    }
    public QueryDAO getQueryDAO() {
        return queryDAO;
    }
    public void setQueryDAO(QueryDAO queryDAO) {
        this.queryDAO = queryDAO;
    }
}

原文地址:https://www.cnblogs.com/chengfang/p/jquery_downList.html