2. 程式人生 > >jquery+ajax實現多個下拉選之間的關聯

jquery+ajax實現多個下拉選之間的關聯

阿新 • • 發佈：2019-01-12 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test01.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
  </head
 
>
  <body>
     <select id="province" name="province">
       <option value="">請選擇....</option>
       <option value="吉林省">吉林省</option>
       <option value="遼寧省">遼寧省</option>
       <option value="山東省">山東省</option>
     </select>
     <select
 
 id="city" name="city">
        <option value="">請選擇.....</option>
     </select>

  </body> 
     <script language="JavaScript">
        $().ready(function(){
            $("#province").change(function(){
                //清空city
                $("#city option:not(:first)"
 
).remove();        
                //根據province設定city
                var prov = $(this).val();
                $.post("cities.xml",function(data){
                    var $xmlProv = $(data).find("province[name="+prov+"]");
                    var $cities = $xmlProv.find("city");
                    $cities.each(function(i,city){
                        var $opt = $("<option></option>");
                        $opt.text($(city).text());
                        $opt.appendTo($("#city"));
                    });
                },"xml");

            });
        })

     </script>

</html>

<?xml version="1.0" encoding="GB2312"?>
<china>
    <province name="吉林省">
        <city>長春</city>
        <city>吉林市</city>
        <city>四平</city>
        <city>松原</city>
        <city>通化</city>
    </province>
    <province name="遼寧省">
        <city>瀋陽</city>
        <city>大連</city>
        <city>鞍山</city>
        <city>撫順</city>
        <city>鐵嶺</city>
    </province>
    <province name="山東省">
        <city>濟南</city>
        <city>青島</city>
        <city>威海</city>
        <city>煙臺</city>
        <city>濰坊</city>
    </province>
</china>

相關推薦

jquery+ajax實現多個下拉選之間的關聯

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>

easyui中實現多個下拉列表聯動

先看下原始碼 <script type="text/javascript" charset="UTF-8"> $(function() { var provinceId = $('#provinceId').combobox({ url : 'p

使用ajax給頁面的多個下拉框動態賦值

 一。前臺頁面 $.post("${ctx}/basedata/baseData.do?method=queryPlantUnitList",function(data){             var optionvalue=eval("("+data+")");

多個下拉框聯動及回顯（Jquery）

應用場景如下： 程式碼實現如下： <%@ page contentType="text/html;charset=UTF-8" import="java.util.*" language="java" %> <%@ include file="

Easyui多個下拉框聯動效果

code this .com cti 下拉框聯動 reload tex count 多個 好久沒寫前端了，以前在做多級聯動的時候，用的是easyui的tree結構，但是需要一次性全部加載，不是按需加載，性能不好，退而求其之，用多個下拉框做 eayui的combobox 有

如何一次在combo中新增N多個下拉選項

目標：為了使三個combo每個下拉選單都顯示卡號 姓名 上機日期 上機時間 下機日期 下機時間 消費金額 餘額 常規辦法： Comboname1.AddItem "卡號" Comboname1.AddItem "姓名" Comboname1.AddItem "上機日期" Combon

多個下拉框z-index層級影響的問題解決

什麼是z-index?定義和用法z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。註釋：元素可擁有負的 z-index 屬性值。註釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！寫這篇文章

Ajax提高篇（7）Ajax實現簡單的下拉框聯動顯示資料

頁面中的兩個下拉列表框：<tr> <td style="width: 130px"> 所在學院：</td> <td styl

form表單提交多個下拉框獲取select選項值，name相同

<tr>                         <th>吃飯</th>                         <td>                             <select name=point id=point>

Ajax 實現級聯下拉框

級聯下拉框隨處可見，最常見的就是省市的級聯，在選擇省份後，對應的區縣的下拉選擇列表的下拉選擇內容也會發生相應改變，即所謂的級聯下拉框。這種頁面非同步重新整理，無可厚非，AJax是首選。 在做一個管理系統時，有這樣一個需求，在選擇了倉庫後，對應的倉位下拉選擇框的內容也需要改變

利用ajax實現二級聯動下拉框

下拉框二級聯動，用ajax來實現是已經非常成熟的技術了。但對於我這個java菜鳥來說，真的是費了九牛二虎之力，各種百度，各種測試。終於得以實現。程式碼相對於網上的容易理解些。現把程式碼和我在編寫的過程中遇到的問題貼出來，對自己也是一個總結，同時也希望能幫助到跟我一樣的菜鳥。

JQuery Ajax三級聯動地區下拉框

JSP部分程式碼         <script src="/js/jquery-1.2.6.min.js" type="text/javascript"></script>  <script>   //為了避免jquery中的'$'與其

用jquery.form實現多個submit按鈕提交

相關前端程式碼如下： <form id="from1" action="/AjaxTestAutoAction/submit.cspx" method="post"> <p><span>Input:</span> <i

jquery如何實現當頁面下拉到一定位置時，右下角出現回到頂部圖標

定位 .com 出現 技術 如何實現 tle img span 圖標 漸進式返回頂部 jquery如何實現當頁面下拉到一定位置時，右下角出現回到頂部圖標

ajax實現三級聯動下拉選單

  老師最近給了個小任務，排課系統中，將老師的的課表顯示出來，要用到下拉選單三級聯動，在網上找了很多資料，但是看別人的程式碼太吃力了，只要思路清晰，何不自己動手敲一個出來。這裡別看我的程式碼，看思路就好了。 要求：選擇第一個下拉選單的某個選項之後，第二個下拉選單的選項要隨

QML建立一個帶多個下拉輸入框的視窗（ComboBox）

在網上搜了很多資料，用QML怎麼實現下拉框的方法很少，並且都很複雜，我按照他們的方法實現的下拉框效果並不是很好，在問了公司的老司機後，他告訴我一個很好用的QML類：ComboBox，下面直接看程式碼和效果圖 import QtQuick 2.5 import QtQuick

ajax實現百度下拉框

使用Ajax實現此效果1.準備資料的serlvetpublic class SelectServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, Http

使用select2實現多功能下拉框，select2中文api

最近專案中有個需求是商品能夠選擇多個標籤，類似jire中選擇標籤： 能把選擇後選項顯示在輸入框中，刪除時連同整個標籤一起刪。經過網上諮詢、請教同事後，得到一致意見是使用select2。 下面是使用select2的初始化、動態賦值，實現標籤化多選、以及遇到的問題： 2，在

使用jQuery+ajax實現級下拉列表的級聯顯示

html部分程式碼為下拉列表新增onchange事件         <div class="form-group" style="margin-right: 0">           

使用bootstrap 的下拉選單實現select的下拉複選框多選

CSS程式碼:/*多選下拉框樣式（根據自己的樣式調整）*/ .dropdown_item{width: 100%} .dropdown_item>li:HOVER{background-color