NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

今天 幫朋友寫的,聯動的方式有很多,寫這個的時候主要考慮,讓服務端來做更多的工作,作為示例 test方法只有6行程式碼,瀏覽器的執行速度應該是非常快的,而且也不佔瀏覽器的記憶體,最近寫javascript,經常遇到效能問題,所以從現在起就的注意了

下面的程式碼比較簡單,實際上依賴一個命名規則和克隆物件的方法,克隆其實不是必要的,但我覺得這樣很真觀。如果資料量大的話可以不克隆直接隱藏顯示就可以了,後臺做下簡單的邏輯判斷。

<html>
    <head>
    <script type=”text/javascript”>
    function $(id){
        return document.getElementById(id);
    }
    function test(){
        var eChild=$(‘child_’ $(“parent”).value).cloneNode(true);
        eChild.name=”child”;
        eChild.style.display=””;
        eChild.value=”c2″
        $(“cspan”).innerHTML=””;
        $(“cspan”).appendChild(eChild);
    }
    function init(){
        test()
    }
    </script>
    </head>
    <body onload=”init();”>
    <%=request.getParameter(“child”)%>
        <form method=”post”>
        <select id=”parent” onchange=”test();”>
            <option value=”1″>a</option>
            <option value=”2″>b</option>
            <option value=”3″>c</option>
        </select>
        <span id=”cspan”></span>
        <select id=”child_1″ style=”display: none;”>
            <option value=”c1″>ca_a</option>
            <option value=”c2″>cb_a</option>
            <option value=”c3″>cc_a</option>
        </select>
        <select id=”child_2″ style=”display: none;”>
            <option value=”c1″>ca_b1</option>
            <option value=”c2″ selected>cb_b2</option>
            <option value=”c3″>cc_b3</option>
        </select>
        <select id=”child_3″ style=”display: none;”>
            <option value=”c1″>ca_c</option>
            <option value=”c2″>cb_c</option>
            <option value=”c3″>cc_c</option>
        </select>
        <input type=”submit”/>
        </form>
    </body>
</html>

相關文章

程式語言 最新文章