Question

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

然而，我正在尝试应用移动外观和感觉。我最初尝试过JQuery Mobile，但由于我们处理会话信息的方式，我不得不禁用页面ajax，这反过来导致网站速度极慢。

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

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

我在asp.net中使用c＃代码进行编码。我不使用jquery，最好不要，我宁愿只是纯粹的javascript。

当我尝试使用jquery mobile时，我遇到了同样的问题，并且在后面的代码页面加载中修复了它：

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未定义的错误，所以我把它放在我的脚本管理器下面，这是在booking.aspx代码中。这些都没有奏效。

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

任何帮助将不胜感激

HTML

这在头脑中

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

然后在体内

<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;

最后有一个手动回帖强制页面回发并仅在相关控件上触发selectedindexchanged事件

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;
}

Answer 1

找到了原始问题的纯CSS解决方案，该问题是下拉列表的样式。

我将ddl包裹在标签

中

<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>

然后应用以下css

.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;
}

这会将图像重叠在ddl的箭头上。指针事件none允许点击通过图像传递到后面的箭头。

轻微的问题，即在指针事件不受支持，但可能是某处的修复。

javascript文件从部分帖子后面的dropdownlist解绑 - 需要重新绑定

1 个答案: