DropDownList.htm

﻿<!DOCTYPE html>
<html>
<head>
    <title>DropDownList</title>
    <link rel="stylesheet" type="text/css" href="jWebForm.css" />
    <script type="text/javascript" src="jWebForm.js"></script>
    <script type="text/javascript" src="DropDown.js"></script>
    <script type="text/javascript" src="DropDownList.js"></script>
    <script type="text/javascript">

        function btnEditWidth_Click()
        {
            var ddlPerson = $j("ddlPerson");

            var width = document.getElementById("txtWidth").value;

            ddlPerson.Width(width);
        }

        function btnShowWidth_Click()
        {
            var ddlPerson = $j("ddlPerson");

            var width = ddlPerson.Width();

            alert(width);
        }

        function btnEditHeight_Click()
        {
            var ddlPerson = $j("ddlPerson");

            var height = document.getElementById("txtHeight").value;

            ddlPerson.Height(height);
        }

        function btnShowHeight_Click()
        {
            var ddlPerson = $j("ddlPerson");

            var height = ddlPerson.Height();

            alert(height);
        }

        $j.Page_Load = function Page_Load()
        {

            var ddlPerson = $j("ddlPerson");

            ddlPerson.DataBind(
                [
                    "&nbsp;",
                    "小明",
                    "小刚",
                    "小红"
                ]
                );


            var ddlPerson2 = $j("ddlPerson2");

            ddlPerson2.DataBind(
                [
                    "&nbsp;",
                    "小明",
                    "小刚",
                    "小红"
                ]
                );
        }

        function ddlPerson2_SelectChanged(ddl)
        {
            var selectedText = ddl.SelectedText();

            alert("SelectedText : " + "\"" + selectedText + "\"");
        }
    </script>
</head>
<body>

    <input type="text" id="txtWidth" value="500px" />
    <input type="button" value="修改 下拉框 宽度" onclick="btnEditWidth_Click(); "/>
    <input type="button" value="显示 下拉框 宽度" onclick="btnShowWidth_Click(); " />

    <br />

    <input type="text" id="txtHeight" value="100px" />
    <input type="button" value="修改 下拉框 高度" onclick="btnEditHeight_Click();" />
    <input type="button" value="显示 下拉框 高度" onclick="btnShowHeight_Click();" />

    <br /><br />

    <j:DropDownList id="ddlPerson"></j:DropDownList>
    
    <j:dropdownlist id="ddlPerson2" selectchanged="ddlPerson2_SelectChanged"></j:dropdownlist>    selectChanged 事件

    <br /><br />
    DropDownList 是 display:inline-block 的，可以直接嵌入到布局中
</body>
</html>