记录01

记录一次开发遇到的问题，项目是asp.net，webform，老项目了

前端是两个下拉框可以双击到另外一个下拉框里面的。

<div style="float: left; padding-top: 40px;">
    <div style="height: 20px; margin-left: 11px; margin-right: 11px;">
        <span>==》</span>
    </div>
    <div style="height: 30px; margin-left: 11px; margin-right: 11px;">
        <span>《==</span>
    </div>
</div>

<div id="s2" style="float: left;">
    <div>
        <select id="rightST" runat="server" multiple="true" style="width: 150px; height: 126px;">
        </select>
    </div>
</div>

生成的html代码如下：

<div id="s1" style="float: left;width: 146px;">
    <div>
        <input name="SelectOP$txtQT" type="text" id="SelectOP_txtQT" style="width:68px;display: block; float: left;" />
        <input type="submit" name="SelectOP$btnSearch" value="查询" id="SelectOP_btnSearch" class="btn mbtn" style="float: left; height: 26px; line-height: 26px; width: 66px; padding: 0px;" />
    </div>
    <div>
        <select name="SelectOP$leftST" id="SelectOP_leftST" ondblclick="SelectLeft_onDbClick" multiple="multiple" style="width: 146px; height: 100px;">
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
    </div>
</div>

<div style="float: left; padding-top: 40px;">
    <div style="height: 20px; margin-left: 11px; margin-right: 11px;">
        <span>==》</span>
    </div>
    <div style="height: 30px; margin-left: 11px; margin-right: 11px;">
        <span>《==</span>
    </div>
</div>

<div id="s2" style="float: left;">
    <div>
        <select name="SelectOP$rightST" id="SelectOP_rightST" multiple="multiple" style="width: 150px; height: 126px;">
    <option value="1">1</option>
</select>
    </div>
</div>

js脚本如下:

    function  <%=this.ClientID %>()
    {
        // 给select1的option加双击事件,移除左边的，给右边添加相应的数据
        var leftST = '<%= leftST.ClientID %>';
        var rightST = '<%= rightST.ClientID %>';
        var objRTValue = $('#<%= hidRightSelectValue.ClientID %>');
        $('#' + leftST).dblclick(function () {
            $('#' + leftST + ' option:selected').each(function () {
                var selected = $(this);
                if (selected.val() != undefined) {
                    $('#' + rightST).append(selected);
                    objRTValue.val(objRTValue.val() + selected.val() + "、");
                }
            });
            // 给右边的选中项恢复不选中状态
            $('#' + rightST + ' option:selected').each(function () {
                $(this).prop("selected", false);//.selected = false;
            });
        });
        // 右边添加相应事件
        $('#' + rightST).dblclick(function () {
            $('#' + rightST + ' option:selected').each(function () {
                var selected = $(this);
                if (selected.val() != undefined) {
                    $('#' + leftST).append(selected);
                    objRTValue.val(objRTValue.val().replace(selected.val() + '、', ''));
                }
            });
            // 给左边的选中项恢复不选中状态
            $('#' + leftST + ' option:selected').each(function () {
                $(this).prop("selected", false);//.selected = false;
            });
        });
    };
    $(function () {
        <%=this.ClientID %>();
    });

加ClientID是为了重复使用。

后台代码

        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                //这里正常是不需要的 ScriptManager.RegisterStartupScript(Page, this.GetType(), "Refresh" + this.ClientID, this.ClientID + "();", true);
                InitControl();
            }
        }

        // 初始化控件的值
        private void InitControl()
        {
            DataTable dt = GetDTEvent();
            string SelectOP = GetGetSelectedValue();
            leftST.Items.Clear();
            rightST.Items.Clear();
            if (dt != null && dt.Rows.Count >0)
            {
                if (!string.IsNullOrEmpty(SelectOP))
                {
                    foreach (DataRow dr in dt.Rows)
                    {
                        if (SelectOP.Contains(dr[leftST.DataValueField].ToString()))
                        {
                            rightST.Items.Add(new ListItem() { Value = dr[leftST.DataValueField].ToString(), Text = dr[leftST.DataTextField].ToString() });
                        }
                        else
                        {
                            leftST.Items.Add(new ListItem() { Value = dr[leftST.DataValueField].ToString(), Text = dr[leftST.DataTextField].ToString() });
                        }
                    }
                }
                else {
                    TextBind = leftST.DataTextField;
                    ValueBind = leftST.DataValueField;
                    this.DtLSource = dt;
                }
            }
        }

由于select下拉框这里viewstate都没有存储值，导致每次页面postback都会使界面上的select值恢复成原来的，所以没有在界面postback时根据隐藏框的值重新设值。这样对性能还是有损耗的。补充一下

multiple="true" size="1"

设置多选下拉框每次最多可选数目。