Javascript文件从下拉列表中取消绑定，需要重新绑定

我在更新面板中有一个下拉列表，因为我需要驱动页面上的其他内容更改所选索引。

然而，我正试图应用一个移动的外观和感觉。我一开始尝试了JQuery Mobile，但由于我们处理会话信息的方式，我不得不禁用页面ajax，这反过来又导致网站非常慢。

我已经尝试应用一些我发现的javascript，它将下拉框的不透明度变为0，然后在顶部放置一个跨度，上面有一些文本和背景图像，图像看起来像一个自定义的下拉框。它获取页面上的所有选择标记来完成此操作，并将文本设置为当前选择的选项标记。这是因为尽管它是一个下拉列表，但对html来说，它只是一个带有一些选项的选择。

我的问题是，当所选索引发生变化时，在部分发布时，javascript从目标下拉列表中删除。我正试图找到一种方法，让我重新应用javascript在部分post回来。

我在asp.net中编码，后面是c#代码。我不使用jquery，最好不要，我宁愿只是纯javascript。

当我尝试jquery移动时，我有同样的问题，这在页面加载的代码后面修复它:

ScriptManager.RegisterStartupScript(Page, GetType(), "temp", "<script type='text/javascript'>$('select').trigger('create');</script>", false); 

我已经在同一个地方试过了:

ScriptManager.RegisterClientScriptInclude(this, GetType(), "specialCombo", ResolveUrl("~") + "Js/test.js"); 

还有这个在母版页的头部:

<script type="text/javascript">
    //On Page Load
    window.onload = function () {
        require("~/Js/test.js");
    };
    //On UpdatePanel Refresh
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                require("~/Js/test.js");
            }
        });
    };
    function require(url) {
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;
        head.appendChild(script);
    }
</script>

这也导致了Sys未定义的错误，所以我把它放在我的脚本管理器下面，这是在预订。aspx代码。

下面是我的html片段，我正在使用的JS文件，以及应用到注入的JS中的css。

如有任何帮助，不胜感激

HTML

标题

<script language="javascript" src="Js/test.js"></script>

然后在body

<asp:UpdatePanel ID="f_NightsUpdatePanel" runat="server" RenderMode="Inline" UpdateMode="Conditional">
         <ContentTemplate>
                  <asp:DropDownList ID="f_Nights" runat="server" CssClass="inputComboHomePage" AutoPostBack="True" OnSelectedIndexChanged="f_Nights_SelectedIndexChanged">
                          <asp:ListItem Text="1" Value="1" Selected="True"></asp:ListItem>
                          <asp:ListItem Text="2" Value="2"></asp:ListItem>
                          <asp:ListItem Text="3" Value="3"></asp:ListItem>
                          <asp:ListItem Text="4" Value="4"></asp:ListItem>
                          <asp:ListItem Text="5" Value="5"></asp:ListItem>
                 </asp:DropDownList>
         </ContentTemplate>
</asp:UpdatePanel>

JAVASCRIPT - JS/test.js

var selectWidth = "190";

document.write('<style type="text/css">select.inputComboHomePage { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
var Custom = {
    init: function () {
        var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
        inputs = document.getElementsByTagName("select");
        for (a = 0; a < inputs.length; a++) {
            if (inputs[a].className == "inputComboHomePage") {
                option = inputs[a].getElementsByTagName("option");
                active = option[0].childNodes[0].nodeValue;
                textnode = document.createTextNode(active);
                for (b = 0; b < option.length; b++) {
                    if (option[b].selected == true) {
                        textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
                    }
                }
                span[a] = document.createElement("span");
                span[a].className = "inputComboHomePage2";
                if (inputs[a].name == "ctl00$Main$f_RoomGroup1" || inputs[a].name == "ctl00$Main$f_BoardType1") {
                    span[a].style.color = 'gray';
                }
                span[a].id = "inputComboHomePage2" + inputs[a].name;
                span[a].appendChild(textnode);
                inputs[a].parentNode.insertBefore(span[a], inputs[a]);
                if (!inputs[a].getAttribute("disabled")) {
                    inputs[a].onchange = Custom.choose;
                } else {
                    inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
                }
            }
        }
        document.onmouseup = Custom.clear;
    },
    choose: function () {
        option = this.getElementsByTagName("option");
        for (d = 0; d < option.length; d++) {
            if (option[d].selected == true) {
                document.getElementById("inputComboHomePage2" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
            }
        }
        if (this.name == "ctl00$Main$f_Nights") {
        __doPostBack('__Page', 'MyCustomArgument');
        }
    }
}
window.onload = Custom.init;

结尾有一个手动回发，强制页面回发，并在相关控件

上触发selected dexchanged事件。CSS

.inputComboHomePage2
{
    position: absolute;
         width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
         height: 21px;
         padding: 0 24px 0 8px;
         color: #fff;
         font: 12px/21px arial,sans-serif;
         background: url(Images/select.png) no-repeat;
         overflow: hidden;
}

<label class="dropDownArrow" style="width:100%;">
      <asp:DropDownList ID="f_Nights" runat="server" CssClass="inputComboHomePage" AutoPostBack="True" OnSelectedIndexChanged="f_Nights_SelectedIndexChanged">
            <asp:ListItem Text="Number of Nights" Value="1" Selected="True"></asp:ListItem>
            <asp:ListItem Text="2" Value="2"></asp:ListItem>
      </asp:DropDownList>
</label>

.dropDownArrow
{
    position: relative;
    display: inline-block;
}
/* Select arrow styling */
.dropDownArrow:after {
    content: '';
    width: 26px;
    height: 26px;
    position: absolute;
    display: inline-block;
    top: 0px;
    right: 0px;
    background: url("Images/combo.png") no-repeat 0 0;
    pointer-events: none;
    z-index:999;
}