ajax中select选择框的使用

最新推荐文章于 2022-02-23 18:53:40 发布
最新推荐文章于 2022-02-23 18:53:40 发布
阅读量190 收藏
点赞数
分类专栏： Ajax 文章标签： Ajax AIR Servlet JavaScript XHTML ViewUI

dynamicLists.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamically Filling Lists</title>

<script type="text/javascript">
var xmlHttp;

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}
   
function refreshModelList() {
    var make = document.getElementById("make").value;
    var modelYear = document.getElementById("modelYear").value;

    if(make == "" || modelYear == "") {
        clearModelsList();
        return;
    }
   
    var url = "RefreshModelList?"
        + createQueryString(make, modelYear) + "&ts=" + new Date().getTime();
       
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}

function createQueryString(make, modelYear) {
    var queryString = "make=" + make + "&modelYear=" + modelYear;
    return queryString;
}
   
function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            updateModelsList();
        }
    }
}

function updateModelsList() {
    clearModelsList();
   
    var models = document.getElementById("models");
    var results = xmlHttp.responseXML.getElementsByTagName("model");
    var option = null;
    for(var i = 0; i < results.length; i++) {
        option = document.createElement("option");
        option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
        models.appendChild(option);
    }
}

function clearModelsList() {
    var models = document.getElementById("models");
    while(models.childNodes.length > 0) {
        models.removeChild(models.childNodes[0]);
    }
}
</script>
</head>

<body>
  <h1>Select Model Year and Make</h1>
 
  <form action="#">
    <span style="font-weight:bold;">Model Year:</span>
    <select id="modelYear" οnchange="refreshModelList();">
        <option value="">Select One</option>
        <option value="2006">2006</option>
        <option value="1995">1995</option>
        <option value="1985">1985</option>
        <option value="1970">1970</option>
    </select>
   
    <br/><br/>
    <span style="font-weight:bold;">Make:</span>
    <select id="make" οnchange="refreshModelList();">
        <option value="">Select One</option>
        <option value="Chevrolet">Chevrolet</option>
        <option value="Dodge">Dodge</option>
        <option value="Pontiac">Pontiac</option>
    </select>
   
    <br/><br/>
    <span style="font-weight:bold;">Models:</span>
    <br/>
    <select id="models" size="6" style="width:300px;">
   
    </select>
 
  </form>

</body>
</html>

 

 

RefreshModelListServlet.java:

package ajaxbook.chap4;

import java.io.*;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import javax.servlet.*;
import javax.servlet.http.*;

public class RefreshModelListServlet extends HttpServlet {

    private static List availableModels = new ArrayList();
   
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
       
        int modelYear = Integer.parseInt(request.getParameter("modelYear"));
        String make = request.getParameter("make");
       
        StringBuffer results = new StringBuffer("<models>");
        MakeModelYear availableModel = null;
        for(Iterator it = availableModels.iterator(); it.hasNext();) {
            availableModel = (MakeModelYear)it.next();
            if(availableModel.modelYear == modelYear) {
                if(availableModel.make.equals(make)) {
                    results.append("<model>");
                    results.append(availableModel.model);
                    results.append("</model>");
                }
            }
        }
        results.append("</models>");
       
        response.setContentType("text/xml");
        response.getWriter().write(results.toString());
    }
   
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }
   
    public void init() throws ServletException {
        availableModels.add(new MakeModelYear(2006, "Dodge", "Charger"));
        availableModels.add(new MakeModelYear(2006, "Dodge", "Magnum"));
        availableModels.add(new MakeModelYear(2006, "Dodge", "Ram"));
        availableModels.add(new MakeModelYear(2006, "Dodge", "Viper"));
        availableModels.add(new MakeModelYear(1995, "Dodge", "Avenger"));
        availableModels.add(new MakeModelYear(1995, "Dodge", "Intrepid"));
        availableModels.add(new MakeModelYear(1995, "Dodge", "Neon"));
        availableModels.add(new MakeModelYear(1995, "Dodge", "Spirit"));
        availableModels.add(new MakeModelYear(1985, "Dodge", "Aries"));
        availableModels.add(new MakeModelYear(1985, "Dodge", "Daytona"));
        availableModels.add(new MakeModelYear(1985, "Dodge", "Diplomat"));
        availableModels.add(new MakeModelYear(1985, "Dodge", "Omni"));
        availableModels.add(new MakeModelYear(1970, "Dodge", "Challenger"));
        availableModels.add(new MakeModelYear(1970, "Dodge", "Charger"));
        availableModels.add(new MakeModelYear(1970, "Dodge", "Coronet"));
        availableModels.add(new MakeModelYear(1970, "Dodge", "Dart"));

        availableModels.add(new MakeModelYear(2006, "Chevrolet", "Colorado"));
        availableModels.add(new MakeModelYear(2006, "Chevrolet", "Corvette"));
        availableModels.add(new MakeModelYear(2006, "Chevrolet", "Equinox"));
        availableModels.add(new MakeModelYear(2006, "Chevrolet", "Monte Carlo"));
        availableModels.add(new MakeModelYear(1995, "Chevrolet", "Beretta"));
        availableModels.add(new MakeModelYear(1995, "Chevrolet", "Camaro"));
        availableModels.add(new MakeModelYear(1995, "Chevrolet", "Cavalier"));
        availableModels.add(new MakeModelYear(1995, "Chevrolet", "Lumina"));
        availableModels.add(new MakeModelYear(1985, "Chevrolet", "Cavalier"));
        availableModels.add(new MakeModelYear(1985, "Chevrolet", "Chevette"));
        availableModels.add(new MakeModelYear(1985, "Chevrolet", "Celebrity"));
        availableModels.add(new MakeModelYear(1985, "Chevrolet", "Citation II"));
        availableModels.add(new MakeModelYear(1970, "Chevrolet", "Bel Air"));
        availableModels.add(new MakeModelYear(1970, "Chevrolet", "Caprice"));
        availableModels.add(new MakeModelYear(1970, "Chevrolet", "Chevelle"));
        availableModels.add(new MakeModelYear(1970, "Chevrolet", "Monte Carlo"));

        availableModels.add(new MakeModelYear(2006, "Pontiac", "G6"));
        availableModels.add(new MakeModelYear(2006, "Pontiac", "Grand Prix"));
        availableModels.add(new MakeModelYear(2006, "Pontiac", "Solstice"));
        availableModels.add(new MakeModelYear(2006, "Pontiac", "Vibe"));
        availableModels.add(new MakeModelYear(1995, "Pontiac", "Bonneville"));
        availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Am"));
        availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Prix"));
        availableModels.add(new MakeModelYear(1995, "Pontiac", "Firebird"));
        availableModels.add(new MakeModelYear(1985, "Pontiac", "6000"));
        availableModels.add(new MakeModelYear(1985, "Pontiac", "Fiero"));
        availableModels.add(new MakeModelYear(1985, "Pontiac", "Grand Prix"));
        availableModels.add(new MakeModelYear(1985, "Pontiac", "Parisienne"));
        availableModels.add(new MakeModelYear(1970, "Pontiac", "Catalina"));
        availableModels.add(new MakeModelYear(1970, "Pontiac", "GTO"));
        availableModels.add(new MakeModelYear(1970, "Pontiac", "LeMans"));
        availableModels.add(new MakeModelYear(1970, "Pontiac", "Tempest"));
    }

    private static class MakeModelYear {
        private int modelYear;
        private String make;
        private String model;
       
        public MakeModelYear(int modelYear, String make, String model) {
            this.modelYear = modelYear;
            this.make = make;
            this.model = model;
        }
    }
}

terran_li2005
关注
专栏目录
jquery Ajax实现Select动态添加数据
10-19
例如，在一个车辆选择的场景中，用户先选择车辆品牌，然后根据所选品牌，Select框会自动填充对应的车型。这就是所谓的联动效果。 在实现这个功能时，我们首先需要在HTML中创建基础的Select元素。以下是一个简单的...
ajax提交select数据,通过Ajax方式绑定select选项数据的实例
weixin_39823200的博客
08-06 582
今天小编就为大家分享一篇通过Ajax方式绑定select选项数据的实例，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。问题描述在编写Web页面的时候常常需要在后端取出数据动态放入select标签中，以供选择。解决办法在HTML代码段中只需写入--请选择--在JavaScript代码段中写入以下ajax取数据并绑定数据的过程$.ajax({type : "post"...
web.net中使用ajax动态加载数据——table和图表实例
susan的博客
02-23 828
本人因工作需要，需要实现页面的局部刷新功能，在网上找了很多资料都不是很完整，本人自己结合网上资料和自己经验多次实验写了一个，在这里记录一下，方便以后查阅。 1.绑定table实例 1.引用工具：Newtonsoft.Json.dll 2.下载Newtonsoft.Json.dll：https://www.cnblogs.com/youmeng/p/4874897.html，如下图 实现table数据的自动刷新 aspx页面代码： <%@ Page Language="C#" AutoEventWi
Ajax生成选择框,通过AJAX更新选择框
weixin_29775479的博客
08-05 181
当我尝试通过AJAX更新整个选择框时，只能第一次运行。在PHP方面，总是发送相同的信息，一次选项字段被禁用和其他时间选择。通过AJAX更新选择框更换整个选择框时是否存在一些问题？这里是JS代码。$(document).ready(function(){$("select").change(function() {tid=location.href.replace(/^.*\/|\.[^.]*$/g...
实现 ajax 多项选择框
omygege
07-12 177
转载请注明出处!! 在用户体验方面ajax可谓功不可漠,怎样才能很好的利用当前开源的插件来实现我们的功能呢? 这就要求我们要了解国外的开源组织,他们的插件都比较成熟. 这不又遇到了一个ajax多项选择框的实现.感觉挺不错的.下面和大家分享一下. js: &lt;script language="javascript" type="text/javascript" src="arc90_m...
select选择框小插件
06-28
在众多的前端组件中，`select`选择框是最常见的一种，用于提供下拉选项供用户选择。本项目是一个基于jQuery编写的`select`选择框小插件，旨在提升用户体验，简化开发者对`select`元素的操作。 jQuery是一个广泛使用...
select2 ajax 设置默认值,初始值的方法
10-18
今天小编就为大家分享一篇select2 ajax 设置默认值,初始值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jquery搜索栏select下拉选择框
12-03
本主题聚焦于“jquery搜索栏select下拉选择框”，这是一个常见的交互元素，用于提供用户友好的搜索体验。在网页的搜索功能中，用户通常需要指定搜索范围，如按类别、日期或其他特定条件进行筛选。这种情况下，一个...
bootstrap中selectpicker下拉框使用方法实例
08-27
在上面的代码中，我们使用 jQuery 选择器选择 SelectPicker 组件，然后使用 selectpicker() 方法初始化组件。我们还可以使用 append() 方法添加选项列表。 四、其他方法 SelectPicker 还提供了一些其他有用的方法...
通过Ajax方式绑定select选项数据
热门推荐
luoyger的专栏
04-15 1万+
问题描述：在编写Web页面的时候常常需要在后端取出数据动态放入select标签中，以供选择。 解决办法：在HTML代码段中只需写入select标，在JavaScript代码段中写入ajax取数据并绑定数据的过程。
Select下拉框结合Ajax使用
iSuperGifted的博客
06-21 1万+
常用情况1： 员工 与 部门 一对一，但是实体类没有外键关联，员工中只记录 部门id,编辑员工信息时 部门要下拉框且默认显示员工所在部门名称（不是id）1. &lt;select name="department" id="department" style="width:200px;"&gt;&lt;/select&gt;2.js$(document).ready(function(){ ...
Ajax-联动选择框
莫轮_小锐 的专栏
07-13 425
任务：完成功能，当上一个Select1选择后，下一个Select2联动显示相应的选择项 流程：    1、在Select1后，加上onChange属性，指向javaScript方法changeType()    2、在要显示select2的地方加上标记，并赋id值 请先选择文件类型    3、Controller层定义方法 @ResponseBody /
使用jQuery和Ajax自动填充选择框（select）
Gemini_llw的博客
08-01 8676
前言：大家好，我是一名正在实习的前端实习生，今天在做项目的时候，遇到了一个没有遇到过的问题，就是从后台获取到的数据要自动填充到选择框内，并且选择框是个select级联（一个选择框改变，另一个也会改变，类似在淘宝买东西时的地址选择框）。 类似这种效果： select级联遇到过，但是从后台获取数据处理select级联还是第一次。 找了篇优质的教程给萌新小白们（包括我）。 原址：https://
用Ajax实现加载列表的
this_name_true的博客
05-22 2361
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" href="css/bootstrap.css" /&gt; &
JS版常见问题(一)层遇到select框时?
阿信的专栏
06-19 2526
当层遇到下拉框时总是挡不了select框?其实这是IE的BUG,其它的浏览器没有这个问题,对于这个问题论坛里不少提出,在这里提供我的几种方法,各有各的好处,有错,有好的意见者提出,谢谢.1.最直接的方法:隐藏下拉框.下面提供的是一个比较通用的一组函数:test.htm------------var HideElementTemp = new Array();//点击菜单时，调用
ajax动态加载 select 下拉框 数据
懒虫的博客
08-26 2095
方法一： 页面： <select class="form-control" name="orgName" id="select_orgName"> <option>--请选择--</option> <!-- 这个option也可以写在ajax中--> </select> 方法二：设置默认值 页面： <input type="hidden" name="orgName" id="selVal" value="${users.
jQuery美化select选择框源码详解
总结来说，"jquery实现的select列表选择框选中美化效果源码.zip"文件中包含了通过jQuery实现的自定义select选择框美化效果的源码。理解上述知识点将有助于开发者学习如何使用jQuery来提升Web界面的交互性和视觉吸引...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值