jquery实现触发时更新下拉列表内容的方法

本文实例讲述了jquery实现触发时更新下拉列表内容的方法。分享给大家供大家参考，具体如下：

服务端假如有个请求地址用来返回所需数据

url:/hello

返回类似：

代码如下:

[{"西瓜":10},{"苹果":12},{"香蕉":13},{"芒果":14}]

这样的json数据

html:

按钮：<input type="button" id="btn" value="按 钮" />

下拉列表：<select id="sel"></select>

js代码：

$(function(){
  $("#btn").click(
   $.ajax({
  type:"POST",
  url:"http://localhost/XXXX/Test",
  cache: false,//不缓存
  dataType:"json",//返回数据格式
  success:function(ret){
    $("#sel").empty();
    $.each(ret,function(ind){
    for(var key in ret[ind]){
      var opt = $("<option></option>");
     opt.val(ret[ind][key]);
    opt.text(key);
    $("#sel").append(opt);
   }
  });
   }
 });
 );
});

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • 巧妙使用JQuery Clone 添加多行数据，并更新到数据库的实现代码

    web前端代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="BatchAdd.aspx.cs" Inherits="BatchAdd" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

  • jquery ajax 局部无刷新更新数据的实现案例

    要更新的页面 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>&l

  • Jquery easyUI 更新行示例

    更新指定的行, param 参数包含下列特性: index:更新行的索引. row:行的新数据. 复制代码 代码如下: var grid = $("#QualityAdd").datagrid("updateRow", { index: gridIndex, row: { Url: "<a href=\"#\">"+r[0].html+"</a>" } }); datagrid 内置

  • JQuery DataTable删除行后的页面更新利用Ajax解决

    使用Jquery的DataTable进行数据表处理非常方便,常遇到的一个问题就是删除一行后页面必须进行更新,需要注意的方法如下:前台页面中初始化table时注意: 复制代码 代码如下: var table = $('#sorting-advanced'); table.dataTable({ 'bServerSide': true, 'sAjaxSource': 'servlet/UserList<%=queryString%>', 'bProcessing': true, 'bStateSa

  • ajax更新数据后，jquery、jq失效问题

    给元素绑定click事件 ,但是遇到一个问题 就是 当我执行一些ajax请求后 这个click事件就失效了 比如说 我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了click事件了 其实 原因很简单 ajax加载内容是在$(document).ready()之后的操作,这个时候给绑定函数的时候,找到的元素集合中还不包括ajax加载的内容,所以原来的没有问题,后加载的就没有绑定 解决方法 有两个 : 1. 在ajax请求成功之后重新绑定 2. 用live方法 复制代码 代码如下:

  • 基于jQuery实现的百度导航li拖放排列效果，即时更新数据库

    index.php中 var autoSave = false; 控制不自动提交. index.php 复制代码 代码如下: <?php require 'db.php'; $query = "SELECT `id`,`order`,`name` FROM `limove` ORDER BY `order`"; $lis = mysql_query($query,$conn); $li_count = mysql_num_rows($lis); ?> <!DOCTYP

  • Jquery工作常用实例 使用AJAX使网页进行异步更新

    AJAX = Asynchronous JavaScript and XML.,是一种创建快速动态网页的技术. AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新.这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新. 通过 jQuery AJAX,你可以直接把远程数据载入网页被选HTML元素中. Jquery Ajax常用的函数有三种,分别是: $.post(url,data,callback,type):使用 HTTP POST 来加载远程数据: $.get(ur

  • jQuery学习总结之元素的相对定位和选择器(持续更新)

    jQuery学习总结之元素的相对定位和选择器(持续更新)

    ①jQuery元素的相对定位. jQuery中不仅可以使用选择器就行绝对定位,而且还可以进行相对定位,只要在$()中指定第二个参数,第二个参数就是相对的元素.第二个参数传递一个jQuery对象,则相对于这个对象为基准进行相对的选择. 复制代码 代码如下: <html> <head> <title>jQuery元素的相对定位和选择器</title> <script type="text/javascript" src="jQ

  • jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法

    本文实例讲述了jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法.分享给大家供大家参考,具体如下: JS鼠标双击事件 onDblClick <td width="10%" title="双击修改" ondblclick="ShowElement(this,<%#Eval("id") %> </td> 这里的本人用绑定的值是传的当前行对应的ID号 function ShowEle

  • jquery实现触发时更新下拉列表内容的方法

    本文实例讲述了jquery实现触发时更新下拉列表内容的方法.分享给大家供大家参考,具体如下: 服务端假如有个请求地址用来返回所需数据 url:/hello 返回类似: 复制代码 代码如下: [{"西瓜":10},{"苹果":12},{"香蕉":13},{"芒果":14}] 这样的json数据 html: 按钮:<input type="button" id="btn" value=

  • JQuery选择器绑定事件及修改内容的方法

    本文实例讲述了JQuery选择器绑定事件及修改内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello World jQuery!</title> <script type="text/javascript" src="jquery-1.3.2.min.js&

  • jquery实现在光标位置插入内容的方法

    本文实例讲述了jquery实现在光标位置插入内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html>  <head>      <title>无标题页</title>      <script type="text/javascript" src="jquery-1.7.2.min.js"></script>     

  • JS与jQuery遍历Table所有单元格内容的方法

    本文实例讲述了JS与jQuery遍历Table所有单元格内容的方法.分享给大家供大家参考,具体如下: 用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { /

  • jQuery+ajax实现鼠标单击修改内容的方法

    现有表格中的一行的代码如下所示: <tr> <td><span class="catid">2</span></td> <td>公司介绍</td> <td>内部栏目</td> <td><span class="listorder" title="点击修改">2</span></td> <

  • JQuery 绑定事件时传递参数的实现方法

    如题,比如我想在$(":text").bind("keyup",funcionName);将当前的文本框作为参数传递给 functionName所代表的函数,应该怎么写?试了一 下$(":text").bind("keyup",functionName(this));这样是不对的! 1.直接在funcionName 里用 this 就是 对 触发时间的元素本身的引用,如果你需要funcionName有更多参数的话,可以这样用:

  • Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法

    需求: 1. 页面部分元素的尺寸需要根据实际打开时浏览器尺寸进行设置: 2. 页面打开后,调节浏览器窗口大小时需要动态调节部分元素的尺寸: 需要注意的点: window.onresize只能在项目中一处进行引用触发,如果在多个地方进行引用触发,会导致只有1个触发事件生效. 解决"多个组件都需要触发"的方案只能是通过一个地方触发后通过组件间通信进行触发. (以调节class为myDiv的div的宽度为例) 解决需求1的方案: html <template> <div c

  • jQuery实现在下拉列表选择时获取json数据的方法

    本文实例讲述了jQuery实现在下拉列表选择时获取json数据的方法.分享给大家供大家参考.具体如下: function populateDropDown() { $.getJSON('/getData.aspx',{Name:$('#parm').val()},function(data){ var select = $('#DDLControl'); var options = select.attr('options'); $('option', select).remove(); $.e

  • jQuery实现页面滚动时动态加载内容的方法

    本文实例讲述了jQuery实现页面滚动时动态加载内容的方法.分享给大家供大家参考.具体分析如下: 很多网站,比如twitter,京东商城首页,会在页面滚动到一定的位置时才动态加载页面内容,这样可以加快页面打开的速度,也可以节约带宽,下面的JS代码就可以帮你做到. var loading = false; $(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).hei

随机推荐