採用xml,xsl,js,xmldom編寫.相容ie和firefox瀏覽器.

效果如以下網址:

1.首先,一個簡單的js類.

function inputSelection()
...{
    /**//*fcuandy 2007-11-22*/    

    var txtObj      =null;  //輸入框 input text
var selObj      =null;  //模擬下拉列表的層 the div which used for option items container
var xd          =null;  //資料據源. xmldom物件 xmldom data source

var pstIdObj    =null;  //下拉後,將id也即option.value存放的位置 
var pstNameObj  =null;  //下拉後,將name也即option.outertext存放的位置.這兩個主要用於表單提交的引數,可用input type=hidden
var selXPath    =null;  //針對xmldom進行查詢的路徑 xpath string
var selAttributeName =null;  //輸入框中的值與哪個屬性值,或節點值進行匹配比較  compare attribute name
var callMethod =null; //點選模擬下拉列表層中的某個項後,資料進行了處理之後,是否再呼叫其它頁面js方法. 可為空

var idIndex =0;  //設定,pstIdObj的值取node的第0個屬性 
var txtIndex =1; //設定,pstNameObj的值取node的第1個屬性


    //清空select div
this.clearSEL=function()
    ...{
        this.selObj.innerHTML ="";
        this.pstIdObj.value ="";
        this.pstNameObj.value ="";
    }


    //根跟使用者輸入值重建select div 裡的選項
this.reBuildSEL=function()
    ...{
   

        var s =this.txtObj.value.toLowerCase();
        var outHTML ="";

        if(ie4)
        ...{this.xd.setProperty("SelectionLanguage","XPath");}
    
    
        //text input .value is null, then list all servers
if(s.length==0)
        ...{
            var root=this.xd.selectNodes(this.selXPath);

        }
        else
        ...{
            var root=this.xd.selectNodes(this.selXPath +"[starts-with(translate(@"+this.selAttributeName +",'abcdefghijklmnopqrstuvwxyz','ABCDEFGHIJKLMNOPQRSTUVWXYZ'),'"+ s.toUpperCase()  +"')]");

        }
        
        //no server available,then list all servers
/**//*if(root.length==0)
        {
            root=this.xd.selectNodes("//server");
            var root=this.xd.selectNodes(this.selXPath);
        }*/

        if(ie4)
        ...{
            for(var i=0;i<root.length;i++)
            ...{
                
                outHTML +="<a href='#'><div style='cursor:hand;width:182;text-decoration:none;color:#333;' onmouseover='this.style.backgroundColor="#98CDCD"' onmouseout='this.style.backgroundColor=""' id="li_"+ root(i).attributes(this.idIndex).value +"" onclick='javascript:document.getElementById(""+this.txtObj.id +"").value=this.innerText;document.getElementById(""+this.pstIdObj.id +"").value=this.id.substring(this.id.indexOf("_")+1,this.id.length);document.getElementById(""+this.pstNameObj.id +"").value=this.innerText;document.getElementById(""+this.selObj.id +"").style.display="none";"+ (this.callMethod ==null?"" : this.callMethod +";") +"'>"+ root(i).attributes(1).value +"</div></a>";
            }
        }
        else
        ...{
            for(var i=0;i<root.length;i++)
            ...{
                
                outHTML +="<a href='javascript:void(0)'><div style='height:20px;width:182px;text-decoration:none;color:#333;' onmouseover='this.style.backgroundColor="#98CDCD"' onmouseout='this.style.backgroundColor=""' id="li_"+ root[i].attributes[this.idIndex].value +"" onclick='document.getElementById(""+this.txtObj.id +"").value=this.textContent;document.getElementById(""+this.pstIdObj.id +"").value=this.id.substring(this.id.indexOf("_")+1,this.id.length);document.getElementById(""+this.pstNameObj.id +"").value=this.textContent;document.getElementById(""+this.selObj.id +"").style.display="none";"+ (this.callMethod ==null?"" : this.callMethod +";") +"'>"+ root[i].attributes[this.txtIndex].value +"</div></a>";
                
            }
        }
        //alert(this.callMethod);
if(outHTML =="")
        ...{
            outHTML ="<br/>";
        }
        i= i==0?1 : i;
        this.selObj.innerHTML = outHTML;
    
    //當對outHTML中寫的onclick事件中的程式碼有一些特列操作時,比如建立新物件,或是給建立新事件等等,總之建立新的html element的話,採用inserAdjacentHTML方法替換innerHTML.
//this.selObj.insertAdjacentHTML("afterBegin",outHTML);
this.selObj.style.position="absolute";
        this.selObj.style.height =20* i >200?200 : 20* i;
        this.selObj.style.display ="";
    }
    

}

 呼叫說明:

a.首先您可以先通過伺服器端指令碼輸出獲得xmldocument供 inputSelection使用.

比如使用asp.net,asp,或php

也可以使用xmlhttp或xmldom直接獲取資料提供頁輸出的xml(或字串並自己轉換為xml)

本來這步操作,我可以加在 inputSelection 類裡的,但是我的頁面是由伺服器在xslt輸出html時生成的xml串,所以將獲提xmldomcumnet的過程分離出來了.

var ns4 = (document.layers) ?true : false;
          var ie4 = (document.all) ?true : false;
          var ServerStr="<xsl:text disable-output-escaping="yes"><![CDATA[<]]></xsl:text>root<xsl:text disable-output-escaping="yes"><![CDATA[>]]></xsl:text>";
          <xsl:for-each select="//CurrentGame/Server">
        ServerStr +="<xsl:text disable-output-escaping="yes"><![CDATA[<]]></xsl:text>Server id="<xsl:value-of select="./@ServerID"/>" name="<xsl:value-of select="./@Name"/>" /<xsl:text disable-output-escaping="yes"><![CDATA[>]]></xsl:text>";
          </xsl:for-each>
          ServerStr +="<xsl:text disable-output-escaping="yes"><![CDATA[<]]></xsl:text>/root<xsl:text disable-output-escaping="yes"><![CDATA[>]]></xsl:text>";


          if(ie4)
          ...{
         var xmlDoc =new ActiveXObject("Msxml2.DOMDocument");
              xmlDoc.async =false;
          xmlDoc.loadXML(ServerStr);

          }
          else
          ...{



              Node.prototype.selectNodes=function(xPath)
          ...{
              var xresult=this.evaluate(xPath,this,null,XPathResult.ORDERED_NODE_ITERATOR_TYPE,null);
              var nod=null,nods=[],k=0;
              while((nod=xresult.iterateNext())!=null)
                  ...{
                      nods[k++]=nod;
                  }
                  return nods;
              }

          XMLDocument.prototype.loadXML =function(xmlString)
              ...{
              var childNodes =this.childNodes;
              for (var i = childNodes.length -1; i <xsl:text disable-output-escaping="yes"><![CDATA[>]]></xsl:text>=0; i--)
                  this.removeChild(childNodes[i]);

                  var dp =new DOMParser();
                  var newDOM = dp.parseFromString(xmlString, "text/xml");
                  var newElt =this.importNode(newDOM.documentElement, true);
                  this.appendChild(newElt);
              };

          var xmlDoc=document.implementation.createDocument('','',null);
              xmlDoc.async=0;

          xmlDoc.loadXML(ServerStr);

          }

b,接下來,頁面上按位置擺放您的html element.

<input type="hidden" id="ServerID" value="" onchange="alert('tst');"/>
              <input type="hidden" id="ServerName"/>
              <div class="div2">
                <span style=" margin:2px 0 0 15px">
                  <table border

相關推薦

文字框+層模擬下拉框,並實現輸入自動提示和過濾

採用xml,xsl,js,xmldom編寫.相容ie和firefox瀏覽器. 效果如以下網址: 1.首先,一個簡單的js類. function inputSelection()...{    /**//*fcuandy 2007-11-22*/        var t

點選文字框彈出下拉框並賦值

實現下面效果  窗體：Form1： 一：窗體佈局：文字框一個或多個，下拉框一個，初始化隱藏，定義全域性變數 string click_value = ""; private void Form1_Load(object sender, EventArgs e) {

關於layui 兩層彈框 ，關閉一個後，重新整理上一個彈框的某個下拉框問題

(我使用的layui版本為2.4.3) 最近因為專案需要，需要實現一層彈框(下面稱之為A彈框)後，點選按鈕跳出二層彈框(下面稱中國之為B彈框)，可以實現新增新的下拉框值，然後再關閉B彈框是，可以實現區域性重新整理A彈框中的部分塊，使得剛新增的值顯示，但是不能是整

js怎麼判斷一個物件是文字框(text)還是下拉框(select)

 方法：一 <input type="text" id="tb_Test" /> < input type="button" id="btn_Test" value="Button /> var type = document.getElemen

使用input、ul模擬下拉框

html <input type="hidden" name="type" id="type" class="type" value="${object.type}"/> <div

freemaker中下拉框（動態下拉框和靜態下拉框）的塞值，回顯

靜態下拉，靜態的情況下把所有靜態的可能都列出來，判斷返回的值是否等於option中的值，如果相等就顯示那行,??是判斷不為空： <label class="control-label">所在端：</label>

select獲取下拉框的值 下拉框預設選中

本文主要介紹select下拉框的相關方法。1.通過id獲取下拉框的value和文字值例如：  <select class="form-control" id="numbers">                     <option value="1"&g

EasyUI下拉列表中實現輸入框不可手動輸入

<input type="text" id="tfi_type" class="easyui-combobox" data-options="prompt:'請選擇資料型別'" editable="false"/>如上，新增 editable="false"即可

模擬select下拉框之多選（數據源采用模擬Ajax數據--原創）

bbb n) nowrap pac inner sel cte spl innerhtml 最近需要一個下拉多選，本來想偷懶的，所以在網上百度了一番，最終還是發現沒有一個符合自己要求的，所以我自己寫了一個插件。下面是GIF動態效果圖展示 相信大家已經看到效果了，接下來

Vue.js模擬百度下拉框

event NPU data resource prevent text eve set bubuko 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta c

模擬點選，滑鼠移動，拖拽，按鍵，下拉框的處理

1.模擬點選 from selenium import webdriver from selenium.webdriver.common.action_chains import ActionChains from time import sleep driver = webdriver.Chrom

android自動提示文字框和下拉框

自動提示框和下拉框佈局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"

點選下拉框切換頁面並顯示在當前頁（語言切換）

預設html: <div class="styled-select">                       

Js獲取下拉框當前選擇項的文字和值

　現在有一個Id為AreaId的下拉框，要獲取它當前選擇項的文字和值有以下方法： <span class="red">* </span> 地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

QComboBox設定下拉框的高度和文字大小，和本身的寬度和大小

設定QComboBox的預設model為QAbstractItemDelegate，但不幸的的是QComboBox的Item並不繼承自QStyedItemDeletegate而是繼承自QItemDelegate。 如果要設定QComboBox的行高，使用Qss的方式 QComboBox QAbstract

pb編輯視窗控制下拉框中的內容自動篩選並必須選擇正確和欄位型別正確

dw 的 editchanged事件: ib_changed = true cb_update.enabled = true datawindowchild ldwc_dddw datawindowchild ldwc_dddw1 CHOOSE CASE dwo.nam

Vue2.x-02根據條件動態設定下拉框、時間選擇器、文字框是否可編輯

文章目錄 概述 選擇器禁止選擇 date-picker禁止選擇 input禁止輸入 概述 我們這裡元件庫使用的iview元件庫 需求是：特定環節，資料只能檢視，不能修改。 （檢視頁面和新增複用的同一個子元件）。 因此

MVC身份驗證.MVC過濾器.MVC6關鍵字Task,Async.前端模擬表單驗證,提交.自定義匿名集合.Edge匯出到Excel.BootstrapTree樹狀選單的全選和反選.bootstrap可搜尋可多選可全選下拉框

在寫這篇部落格之前要嘮叨幾句.本人已從事開發四年有餘.從前兩年的熱情如火.到現在的麻木.總感覺要像上突破.卻又不敢輕舉妄動. 沒事就寫點基礎程式碼.指點下新人吧 1.MVC身份驗證.    有兩種方式.一個是傳統的所有控制器繼承自定義Control，然後再裡面用MVC的過濾器攔截.所以每次網站的後臺被訪問時.

文字框、下拉框設定只讀

在文字框裡面給文字框設定只讀：readonly="readonly"，但這種設定之後，如果想點選某個按鈕觸發將這個文字框取消只讀，則要在js指令碼中禁用，readonly的“o”必須是大寫的。而給下拉框設定只讀是使用 ：disabled="disabled"屬性，若需要新增顏色，用backgroun

有輸入功能的HTML下拉框--並且可以動態獲取文字框的值

<DIV style="POSITION: absolute"><TABLE cellSpacing=0 cellPadding=0 border=0><TBODY><TR><TD><SELECT name=