在 DropDownlist 中写入文本而不创建新项目

Question

我有一个包含 5 个项目的下拉列表。我想在开始时在 DropDownlist “Select”中写入，使其在 DropDownlist 打开时消失，不再显示。 我设法通过添加新项目并删除它来做到这一点，但是有没有办法在不使用 Item.Add(new ListItem.....) 的情况下做到这一点？

我还尝试禁用新项目（它也可以），但它完全隐藏了“选择”，除非我点击 DropDownlist，否则我需要看到它。

$('#<%=ddl.ClientID%>').focus(function() {           
        var hasValue = '<%=IfHasValue()%>';        
        if (hasValue == 'True')
        {
            if(!removed){
                var index = $('#<%=ddl.ClientID%>').get(0).selectedIndex;
                $('#<%=ddl.ClientID%> option:eq('+index+')').remove();
                removed = true;
            }
        }

此代码正在运行，但下拉列表不想在第一次点击时打开（当项目正在删除时），我应该再次点击打开它，看看项目是否被删除（确实如此）。

你能给我一些建议吗？

P.S 抱歉我的英语不好。

Answer 1

首先将 AppendDataBoundItems 的下拉列表声明为 true：

<asp:dropdownlist id="ddl" runat="server" AppendDataBoundItems="true" >
    <asp:ListItem Value="0" Text="[ Select ]" Selected="True"></asp:ListItem>
</asp:dropdownlist>

现在在代码隐藏中正常进行绑定。页面呈现后，它将具有“选择”选项作为第一个选项。

现在，使用 jQuery 或 Javascript 在下拉菜单上绑定“点击”事件：

$('#ddl').click(function() {
    // Either pre-select the next option before removing
    //$("#ddl")[0].selectedIndex = 1;

    $("#ddl option[value='0']").remove();

    // Or select the next option after removal 
    $("#ddl")[0].selectedIndex = 0;
});

这将删除“选择”选项（值“0”）。每次单击时，它都会尝试删除值为“0”的选项。第一次，它会找到它并删除。随后的时间，它不会找到任何这样的选项，因此不会做任何事情。

确保您为此特定选项提供唯一值。

编辑：

或者：您可以绑定“焦点”，以便在通过单击注册鼠标按钮之前进行此删除。

$('#ddl').focus(function() {
    $("#ddl")[0].selectedIndex = 1;
    $("#ddl option[value='0']").remove();
});

这是一个有效的小提琴：http://jsfiddle.net/kne6K

确保先预选下一个选项。

Answer 2

页面加载时在客户端下拉列表的options集合开头添加新项目，并在onchange事件中检查该项目是否存在于集合中，然后将其删除。

您可以使用$get("<%= DropDowwnlist.ClentID%>")在客户端获取 DropDownlist

Answer 3

所以你可以，如果你加载它，用选择替换你的第一个项目。 将特殊值加载到 DDL 后，请执行以下操作：

Session["ReplacedItem"] = DropDownList.Items[0].Text; // Store your old Text here
DropDownList.Items[0].Text = "Select";

然后添加OnClick函数：

DropDownList.Attributes.Add("onclick", "return ChangeTextBack()")

然后在你的 aspxcode 中添加：

<script language="javascript" type="text/javascript">

function ChangeTextBack() {

var RI = '<%= Session["ReplacedItem"].ToString() %>';var 
select=document.getElementById("DropDownList1");
select.options[0].text=RI;
return false;

}