两个关联的下拉框,第一个改变,第二个跟着变

<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="../../css/fonts/font-awesome.min.css">
        <link rel="stylesheet" href="../../css/ui-box.css">
        <link rel="stylesheet" href="../../css/ui-base.css">
        <link rel="stylesheet" href="../../css/ui-color.css">
        <link rel="stylesheet" href="../../css/appcan.icon.css">
        <link rel="stylesheet" href="../../css/appcan.control.css">
        <link rel="stylesheet" href="../../css/main.css">
    </head>
    <body class="um-vp bc-bg" ontouchstart  style="background:rgba(0,0,0,0.15);">
        <div id=""style="height:20%"  >

        </div>
        <div id="" class="uc-a" style="height:22em;left:5%; 89%; background:rgba(255,255,255,1);"class="ub ub-ver">
            <div id="" class="tv"onclick="fun()">
                <div class="fa  fa-times ulev3" style="top: 6%"></div>
            </div>
            <div id=""style="top: 4%;height: 75%;left:5%;overflow-y: auto;">
                <div id=""class="ub ub-ver-h">
                    <font size="4"><b>中队名称:</b><div id="teamName"></div> </font>
                    <br />
                </div>
                <form method="post" action="" name="myForm">
                    <div class="ub ub-ver-h"style="top: 3%">
                        <div style="margin-top: 3%;">
                            评价项目:
                        </div>
                        <div class="select uba bc-border bc-text"style=" 45%;">
                            <div class="text">
                                --请选择--
                            </div>
                            <div class="icon"></div>
                            <select selectedindex="0" id="select1"  name="country" onChange="changeProvince()">
                                <option value=0>-评价项目-</option>
                                <option value=11>早操</option>
                                <option value=12>交接班</option>
                                <option value=13>体能训练</option>
                                <option value=14>队列训练</option>
                                <option value=15>参加会议</option>
                                <option value=16>灭火救援</option>
                                <option value=17>集合站队</option>
                                <option value=18>晚点名</option>
                                <option value=19>各项制度落实</option>
                            </select>
                        </div>
                    </div>
                    <div class="ub ub-ver-h"style="top: 1em">
                        <div style="margin-top: 3%;">
                            评价结果:
                        </div>
                        <div class="select uba bc-border bc-text"style=" 45%;">
                            <div class="text"id="xxx">
                                良好
                            </div>
                            <div class="icon"></div>
                            <select selectedindex="0" id="select2" name="province">
                               <optgroup label='--等级--'></optgroup>
                            </select>
                        </div>
                    </div>
                </form>
                <div class="ub ub-ver"style="top: 6%">
                    <div style="margin-top: 3%;">&nbsp; &nbsp; &nbsp; &nbsp; 注:
                    </div>
                    <div class="uba bc-border uinput ub ub-f1"style=" 80%">
                        <textarea type="text" class="ub-f1" id="remark"></textarea>
                    </div>

                </div>

            </div>
            <div class=" ub ub-ac bc-text-head ub-pc bc-btn uc-a1" style="top:5%; 40%;background-color: #dd3030;text-align: center;height: 2em;right: -55%;" id="submit">
                确定
            </div>
            <!-- <div class=" ub ub-ac bc-text-head ub-pc bc-btn uc-a1" style=" 40%;background-color: #ccc;text-align: center;height: 2em;right: -5%;top: -2.28%"  id="oneSign">
            一键签到
            </div> -->
        </div>
        <div id=""style="height: 23%">

        </div>

    </body>
    <script src="../../js/appcan.js"></script>
    <script src="../../js/appcan.control.js"></script>
    <script src="../../js/main1.js"></script>
    <script src="../../js/main.js"></script>
    <script src="../../config.js"></script>
    <script src="../../js/jy.main.js"></script>
    </body>
    <script>
        appcan.ready(function() {
        })
        var iteamId = 11;
        function changeProvince() {
            $('#xxx').text("良好");
           // alert($('#xxx').text());
            //iteamId=$(obj).val();
            with (document.myForm) {
                var countrys = new Array();
                countrys["11"] = ["良好", "一般", "较差", "不组织落实", "其他"];
                countrys["12"] = ["良好", "一般", "较差", "不组织落实", "其他"];
                countrys["13"] = ["良好", "一般", "较差", "不组织落实", "其他"];
                countrys["14"] = ["良好", "一般", "较差", "不组织落实", "其他"];
                countrys["15"] = ["良好", "一般", "较差", "不组织落实", "其他"];
                countrys["16"] = ["良好", "一般", "较差", "其他"];
                countrys["17"] = ["良好", "一般", "较差", "不组织落实", "其他"];
                countrys["18"] = ["良好", "一般", "较差", "不组织落实", "其他"];
                countrys["19"] = ["良好", "一般", "较差", "不组织落实", "其他"];
                iteamId = country.value;
                province.options.length = 0;
                var option;
                for ( i = 0; i < countrys[iteamId].length; i++) {
                    option = new Option(countrys[iteamId][i], countrys[iteamId][i]);
                    province.options.add(option);
                }
                if (country.iteamId == "0")
                    province.disabled = true;
                    else{
                         province.disabled = false;
                    }
            }
        }

        var teamId = getLocVal('teamId');
        appcan.select(".select", function(ele, value) {
            console.log(value);
        });
        appcan.button("#submit", "btn-act", function() {
            var judge = $('#select2').val();
            var remark = $('#remark').val();
            if(judge == ""){
                $toast('选择有误',2000)
                return;
            }
            if (judge == "良好") {
                judge = 21;
            }
            if (judge == "一般") {
                judge = 22;
            }
            if (judge == "较差") {
                judge = 23;
            }
            if (judge == "不组织落实") {
                judge = 24;
            }
            if (judge == "其他") {
                judge = 25;
            }
            //alert(teamId + "===" + iteamId + "=====" + judge + "=====" + remark)
            //return;
            ajax({
                url : "appcanAjax/appTeam_add",
                data : {
                    groupId : teamId,
                    judgementId : judge,
                    remark : remark
                },
                dataType : "json",
                successx : function(data) {
                    $toast("添加成功", 2000)
                    setTimeout(function() {
                        appcan.window.close(-1);
                    }, 1000);
                },
                error : function(xhr, type) {
                    $toast("网络连接超时", 3500);
                }
            });

        })
        function fun() {
            appcan.window.close(-1);
        }


    </script>
</html>
原文地址:https://www.cnblogs.com/1ming/p/7337609.html