下拉框的级联效果的制作。

$("#province").append(function () {          //append() 方法在被选元素的结尾(仍然在内部)插入指定内容

   var html = "";                 //添加子节点的另一种新颖的用法。

  for (var i in cityList) {               //循环的方法。

  html += "<option value=" + i + ">" + i + "</option>"; //这个i很让人迷惑,就是代表数组中的值。而不是数字。

  }

  return $(html);

});

$("#province").change(function () {

  var v = $(this).val();

  var html = "";

  if (v == "请选择省/城市") {

    html = "<option>请选择城市/地区</option>";

    $("#city").html(html);

    return; //结束掉,不执行下面的。

  }

  var citys = cityList[v]; //上面没有执行,就执行这里的。

  $.each(citys, function (i, n) { //each循环的用法。

  html += "<option value=" + n + ">" + n + "</option>"; //下拉框的级联效果

  });

  $("#city").html(html);

  });

原文地址:https://www.cnblogs.com/yxblogs/p/9749216.html

时间: 2024-08-29 11:03:30

下拉框的级联效果的制作。的相关文章

3、CRM2011编程实战——选项集(下拉框)联动效果的实现

需求:根据选择不同的"反映类别",帅选出不同的"反映内容". 字段说明:反映类别:hxcs_feedbacktype,反映内容:hxcs_feedbacktype 解决方案:要设置两个选项集的关联,我们可以为两个选项集设置value的时候,做一些特殊的处理.举例:假设类别的Value:1001,1002,那么对应的内容可以设置为:类别value+00001,即100100001,以此类推.如下图: Js代码如下: function onFeedBackTypeCha

bootstrap-select实现下拉框多选效果

bootstrap-select实现下拉框多选效果 听语音 在学习bootstrap实现下拉多选效果的时候,觉得该效果很好,所以拿来分享下,这里就不详细的描述了,直接附上代码给各位看看 方法/步骤 1 最终实现的效果: 2 HTML代码: <div class= "row" style ="margin-top :10px;"> <div class= "form-group col-xs-12"> <label f

通过jquery来实现文本框和下拉框动态添加效果,能根据自己的需求来自定义最多允许添加数量,实用的jquery动态添加文本框特效

<!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> <meta http-equiv="content-

自定义下拉框样式,利用prototype制作

<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script> <script type="text/javascript"> // function createDropdown(ele){ this.dropdown=ele; this.val=''; this.index=-1;//默认值时-1 this.palceholder

通过创建元素从而实现三个下拉框的联动效果(create.Element(&quot;option&quot;))和提交表单时的验证p.match(&quot;请选择&quot;)

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>下拉框</title> 5 <script language="javascript"> 6 function reg(){ 7 var p,c,a,flag=false; 8 p=document.getElementById("pro").value; 9 c=docu

layui下拉框实现级联

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <link href="../layui/css/layui.css" rel="stylesheet" /> <script src="../layui/layui.js"></script> <script src=".

鼠标移上去下拉框出现移走或者点击之后 下拉框消失的效果。

首先引入bootstrap的组件 在鼠标移上去的地方 <span data-hover="dropdown" class="dropdown-toggle">用户信息</span> <ul class="dropdown-menu dropdown-alerts ">            <li><a href="#"><span></span&g

JQuery和ASP.NET分别实现级联下拉框效果

在学习JQuery之前知道下拉框的级联效果可以通过asp.net控件实现,现在学习了JQuery,知道了JQuery和select也能实现.我分别举两个小例子说明这两种方法如何实现. 1.用JQuery和select来实现汽车厂商和汽车类型的联动 效果图:       逻辑分析图: html代码: [html] view plain copy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

easy ui 下拉级联效果 ,下拉框绑定数据select控件

html代码: ①两个下拉框,一个是省,另一个市 <tr> <td>省:</td> <td> <select id="ProvinceId" style="width: 150px;"> </select></td> <td>市:</td> <td> <select id="LocationId" style="