要实现的功能是,点击select输入框,数据库里面的数据会以option弹出。

这需要用到ajax异步连接数据库

下面贴出代码

先说明一下后台传递的数据是json,以map的形式传入的。后台代码很简单,这里就不累赘了

直接贴出前台代码了

 <select id="courseSelect" class="select" size="1" onclick="find()" name="demo1" datatype="*" nullmsg="请选择所在城市!">
</select>

下面是js代码

    function  find(){
if(document.getElementById("courseSelect").length==0){
$.ajax({
type:"get",
async:true,
url:"curriculum.do",
dataType:"json", //必写
data: {method:"getAllCourseName"},
contentType: "application/x-www-form-urlencoded; charset=utf-8", //防止提交中文乱码
success:function(msg){
for(var mi in msg){ //循环json
var txt2=$("<option value=msg[mi]></option>").text(msg[mi].name);
$("select").append(txt2);
}
}
});
return true;
}else{
return false;
}
}

select中用的是onclick,js语句中记得要用if判断一下

select与ajax结合的更多相关文章

  1. jquery select 列表 ajax 动态获取数据 模糊查询 分页

    最近需要一个这样的select 在网上找的多是数据一次性获取到再通过前端模糊查询匹配的 这样在数据量比较大的情况下不适合 ,所以参考http://www.jq22.com/jquery-info145 ...

  2. 【jquery】ajax 动态 改变 select下拉框选中的值

    //JS<script type="text/javascript> //ajax动态给添加原料的[商品名称]下拉框绑定selected属性 $("#origin_co ...

  3. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  4. JQuery+Ajax制作省市联动

    $(document).ready(function () { $("#Province").append("<option value=''>" ...

  5. 完整的Ajax及三级联动小练习

    Ajax结构: var name = $("#text_1").val(); $.ajax({ url: "Ashxs/Handler.ashx",//一般处理 ...

  6. Ajax.Utility.RegisterTypeForAjax(typeof(_Default)) 的使用

    语句的作用:页面注册方法的作用. Ajax.Utility.RegisterTypeForAjax(typeof(命名空间.类名)); 首先要在配置文件里配置 <httpHandlers> ...

  7. $.ajax()实现简单计算器

    1.html页面  a.html <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  8. select2中的ajax请求

    下面介绍select2.js的方法,已经整理好文件,可以直接下载使用: 实现效果如下: 引用文件:select2.min.css jquery.js select2.full.min.js <h ...

  9. WEB框架之Ajax

    一 Ajax简介 1 Ajax的介绍 AJAX翻译成中文就是"异步Javascript和XML".即使用JavaScript语言与服务器进行异步交互,传输的数据为XML(当然,传输 ...

随机推荐

  1. C/C++基础知识总结——C++简单程序设计

    1. sizeof 1.1 sizeof(类型名) 1.2 sizeof 表达式 1.3 返回所占字节大小 2. I/O流的输出格式 2.1 常用I/O流库操纵符 dec         十进制 he ...

  2. Discuz开源论坛

      Discuz开源论坛本地部署自动生成数据库   这个版本可能比较有点老,但是万变不离其宗,再新的版本都是在已有的基础上更新的,所以掌握方法是最重要的! 先上几张安装成功后的图 (安装成功的论坛首页 ...

  3. 设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用

    设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo ...

  4. day7 面向对象编程

    编程范式 编程是程序员用特定的语法+数据结构+算法组成的代码来告诉计算机如何执行任务的过程,一个程序是程序员为了得到一个任务结果而编写的一组指令的集合,正所谓条条大路通罗马,实现一个任务的方式有很多种 ...

  5. Hadoop Streaming Command Details and Q&A

    Hadoop Streaming Hadoopstreaming is a utility that comes with the Hadoop distribution. The utilityal ...

  6. 用友CDM系统,将货位间商品移库单(一步)修改为内调出入库单(一步)方法使用

    客户一般只购买CDM供应链系统,但是只买供应链模块不能进行内调等操作,据说插件将近15万(坑爹~~~) 货位间商品移库单和内调差不多,区别是货位间移库默认只能选择登陆账号所属机构的货位. 解决方案:分 ...

  7. ubuntu下vsftpd配置

    网上的文章好难懂啊..只想要简单粗暴,弄好能用就行啊,复杂的以后研究不行吗...折腾好久,其实弄出来能用不就这么点内容吗... 本文在Ubuntu Server 14.04 amd64系统测试. 安装 ...

  8. JS网站当前日期在IE9、Chrome和FireFox中年份显示为113年的解决方法 getFullYear();

    JS网站当前日期在IE9.Chrome和FireFox中年份显示为113年的解决方法 getFullYear();

  9. 从ASP.NET Web API 2 (C#)开始说起

    [译]Getting Started with ASP.NET Web API 2 (C#) 单击此处查看原文 HTTP不是单单为网页服务的,它更是一种用于构建API(用于暴露服务和数据)的强大平台. ...

  10. TestNG中的DataProvider返回Iterator<Object[]>的妙用

    TestNG中使用DataProvider有个好处,就是: 1. 在执行用例的时候dataProvider迭代中的每组数据都是作为一个用例执行 2. 在测试数据有规律的情况下,免去了添加testXML ...