getJSON获取JSON文件加载下拉框及动态验证比输入项

1.html界面

<form action="" method="get">

        <div class="form-group">
            <div class="col-sm-3">
                <label class="control-label">集团</label>
            </div>
            <div class="col-sm-9">
                <select id="groupType" name="offsetType" class="table "></select>
            </div>
        </div>

        <div class="formControls col-xs-2 col-sm-2">
            <select name="shipment.startstation" id="startstation"></select>
        </div>
        <div><button id="button" type="submit" title="提交">提交</button></div>
    </form>

2.getJSON方法

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $.getJSON("/Scripts/Data_Json/JsonList.js", function (result) {

        $("#groupType").html("<option value=‘-1‘>请选择</option>");
        $.each(result.employees, function (i, field) {
            var name = encodeURI(field.name, "utf-8");
            var result = "<option value=‘" + field.id + "‘>" + field.name + "</option>";
            $(‘#groupType‘).append(result);

        });

        $("#startstation").html("<option value=‘-1‘>请选择</option>");
        $.each(result.goodscode, function (i, field) {
            var name = encodeURI(field.name, "utf-8");
            var result = "<option value=‘" + field.id + "‘>" + field.name + "</option>";
            $(‘#startstation‘).append(result);

        });

        $("#button").click(function ()
        {
            //$("#groupType").attr("data-options", "required:true");//设置属性为必输入项
            var groupType = $("#groupType").val();
            if (groupType <= 0)
            {
                alert("当单据为OMS时,货品类型必须输入,请选择");
                return false;
            }
        });

    });

3.以下是js后缀保存的Json资源文件

原文地址:https://www.cnblogs.com/markli/p/9278869.html

时间: 2024-07-28 17:40:03

getJSON获取JSON文件加载下拉框及动态验证比输入项的相关文章

动态加载下拉框列表并添加onclick事件

1.  js动态加载元素并设置属性 摘自(http://www.liangshunet.com/ca/201408/336848696.htm) <div id="parent"></div> function addElementDiv(obj) { var parent = document.getElementById(obj); //添加 div var div = document.createElement("div"); //设

ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询

ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这个功能了,印象中曾经写过这个功能的文章,一下子找不到了,只好重新贴出来备忘.最近博客快2个月没更新了,因为这两个月一直在闭门写书. 引入js和css下载地址:http://download.csdn.net/detail/zouyujie1127/9550279 <link href="~/l

ListView上拉加载下拉刷新

主要用到了这个几个文件,MainActivity是界面的Activity,MyAdapter是ListView的自定义适配,MyListView是自定义带头部LIistView,如果只需要上拉加载就不需要:activity_main.xml是住界面,item.xml是ListView的子布局里面只有一个TextView,listview_footer.xml是listview的加载更多的底部布局,listview_header.xml是listview的头部布局. MainActivity.ja

XML解析及上拉加载下拉刷新

XML解析及上拉加载下拉刷新 1.XML格式 2.GData和XPath遍历 //配置XML库(配置完才能使用) //(1)添加头文件搜索路径 // Header Search Paths-> /usr/include/libxml2 //(2)添加二进制库 // Link library -> lixml2.dylib //(3)源文件添加编译选项 // -fno-objc-arc //(4)添加头文件 // #import "GDataXMLNode.h"*/ XPat

微信小程序上拉加载下拉刷新

微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载的动画可能会是白色背景,会看不清. { "usingComponents": { "annicate": "/components/annicate/index" }, "navigationBarTitleText": &quo

使用dragloader.js插件实现上拉加载/下拉刷新..

在写代码时候有个需求是,在触屏页面,为了加快页面加载速度,案件列表每页展示5条数据: 然后点击更多,展示下一页数据: 但是为了触屏更好的体验,改为往上滑动案件列表,加载下一页数据:就是要实现上拉加载/下拉刷新的效果: 我只用到了 上拉加载: 参考资料:http://blog.csdn.net/xb12369/article/details/39202711 下面是写的demo: html代码: <!DOCTYPE html> <html lang="en"> &

Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法

bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件 在 使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore下的index.js,全部引入的要找mint下面mint-ui.common.js 路径如下:你的项目名/node_modules\mint-ui\lib\loadmore\index.js 搜索 handleTouchEnd ,记得写event进去 handleTouchEnd: function

移动端上拉加载下拉刷新

<template> <div class="wrapper" ref="wrapper"> <div class="content" > <div class="refresh" :class="{ativeRefresh:refresh}">刷新</div> <div class="ct-row" v-for=&quo

Jquery+json绑定带层次下拉框(select控件)

一.实现的效果图 二.主要代码 html代码 <select id="pid" runat="server"> <option value="0" data="|0|">不选父级类</option> </select> Jquery代码 var html = ['<option value="0">不选父级模块</option>'];