Question

通常，当我遇到问题时，可以在这里找到答案，但是类似文章中的答案不适用于我正在做的事情。我正在为此项目使用vb.net 2017。

我有一个带有html select下拉列表的页面，该页面已数据绑定到sqldatasource控件。选择文本将绑定到colorname字段，而值将绑定到前色字段。我使用文本来设置html输入的背景色和输入值。我使用该值设置提到的输入文本框的前景色。尽管当我选择任何选项时此方法确实起作用，但select仅返回第二个“选项”值。 onchange函数是提交表单的javascript函数，因此我可以触发onchange事件。

    <div class="row">
        <div class="col-lg-2 textalignright">
            <label>Background Color</label>
        </div>
        <div class="col-lg-9">
            <select id="cbgcolor" runat="server" class="rcorners input" onchange="GetSelectedTextValue()" datasourceid="SqlDataSource2" datatextfield="colorname" datavaluefield="forecolor">

            </select>
        </div>
        <div class="col-lg-1">
            <input id="ibgcolor" runat="server" type="text" class="rcorners input" />
        </div>
    </div>

javascript代码

<script type="text/javascript">
    function GetSelectedTextValue() {
        form1.submit();
    }
</script>

背后的代码

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    AddHandler cbgcolor.ServerChange, AddressOf Color_ServerChange
End Sub

Sub Color_ServerChange(sender As Object, e As EventArgs)
    'ibgcolor.Style.Clear()
    ibgcolor.Style.Add("background-color", cbgcolor.Items(cbgcolor.SelectedIndex).Text)
    ibgcolor.Style.Add("color", cbgcolor.Value)
    ibgcolor.Value = cbgcolor.Items(cbgcolor.SelectedIndex).Text
End Sub

当我运行此页面并选择任何选项时，都会看到它加载，然后恢复为选项中的第二个选项。第一个选项是文字说选择颜色。

编辑：这是网站上的DropDownList

<asp:DropDownList ID="acbgcolor" runat="server" CssClass="rcorners input">
    <asp:ListItem Value="black" Text="--Background Color--"></asp:ListItem>
    <asp:ListItem Value="black" Text="AliceBlue"></asp:ListItem>
    <asp:ListItem Value="black" Text="AntiqueWhite"></asp:ListItem>
    <asp:ListItem Value="black" Text="Aqua"></asp:ListItem>
    <asp:ListItem Value="black" Text="Aquamarine"></asp:ListItem>
    <asp:ListItem Value="black" Text="Azure"></asp:ListItem>
    <asp:ListItem Value="black" Text="Beige"></asp:ListItem>
    <asp:ListItem Value="black" Text="Bisque"></asp:ListItem>
</asp:DropDownList>

selectedindexchanged事件

Private Sub acbgcolor_SelectedIndexChanged(sender As Object, e As EventArgs) Handles acbgcolor.SelectedIndexChanged
    ibgcolor.Style.Clear()
    ibgcolor.Style.Add("background-color", acbgcolor.Items(acbgcolor.SelectedIndex).Text)
    ibgcolor.Style.Add("color", acbgcolor.Items(acbgcolor.SelectedIndex).Value)
    ibgcolor.Value = acbgcolor.Items(acbgcolor.SelectedIndex).Text
End Sub

创建了一个新项目进行测试，其行为与上述asp dropdownlist相同，无论我选择哪个选项，它都返回索引0。

这是完整的asp页面

<html lang=en>
<head runat="server">
<link href="StyleSheet1.css" rel="stylesheet" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
        <asp:ListItem Value="black" Text="--Background Color--"> 
</asp:ListItem>
        <asp:ListItem Value="black" Text="AliceBlue"></asp:ListItem>
        <asp:ListItem Value="black" Text="AntiqueWhite"></asp:ListItem>
        <asp:ListItem Value="black" Text="Aqua"></asp:ListItem>
        <asp:ListItem Value="black" Text="Aquamarine"></asp:ListItem>
        <asp:ListItem Value="black" Text="Azure"></asp:ListItem>
        <asp:ListItem Value="black" Text="Beige"></asp:ListItem>
        <asp:ListItem Value="black" Text="Bisque"></asp:ListItem>
        <asp:ListItem Value="white" Text="Black"></asp:ListItem>
        <asp:ListItem Value="black" Text="BlanchedAlmond"></asp:ListItem>
        <asp:ListItem Value="white" Text="Blue"></asp:ListItem>
        <asp:ListItem Value="white" Text="BlueViolet"></asp:ListItem>
        <asp:ListItem Value="white" Text="Brown"></asp:ListItem>
        <asp:ListItem Value="black" Text="BurlyWood"></asp:ListItem>
        <asp:ListItem Value="black" Text="CadetBlue"></asp:ListItem>
        <asp:ListItem Value="black" Text="Chartreuse"></asp:ListItem>
        <asp:ListItem Value="white" Text="Chocolate"></asp:ListItem>
        <asp:ListItem Value="black" Text="Coral"></asp:ListItem>
        <asp:ListItem Value="black" Text="CornflowerBlue"></asp:ListItem>
        <asp:ListItem Value="black" Text="Cornsilk"></asp:ListItem>
        <asp:ListItem Value="white" Text="Crimson"></asp:ListItem>
        <asp:ListItem Value="black" Text="Cyan"></asp:ListItem>
        <asp:ListItem Value="white" Text="DarkBlue"></asp:ListItem>
        <asp:ListItem Value="white" Text="DarkCyan"></asp:ListItem>
        <asp:ListItem Value="white" Text="DarkGoldenrod"></asp:ListItem>
        <asp:ListItem Value="black" Text="DarkGray"></asp:ListItem>
        <asp:ListItem Value="white" Text="DarkGreen"></asp:ListItem>
        <asp:ListItem Value="black" Text="DarkKhaki"></asp:ListItem>
        <asp:ListItem Value="white" Text="DarkMagenta"></asp:ListItem>
        <asp:ListItem Value="white" Text="DarkOliveGreen"></asp:ListItem>
        <asp:ListItem Value="black" Text="DarkOrange"></asp:ListItem>
        <asp:ListItem Value="white" Text="DarkOrchid"></asp:ListItem>
        <asp:ListItem Value="white" Text="DarkRed"></asp:ListItem>
        <asp:ListItem Value="black" Text="DarkSalmon"></asp:ListItem>
        <asp:ListItem Value="black" Text="DarkSeaGreen"></asp:ListItem>
        <asp:ListItem Value="white" Text="DarkSlateBlue"></asp:ListItem>
        <asp:ListItem Value="white" Text="DarkSlateGray"></asp:ListItem>
        <asp:ListItem Value="black" Text="DarkTurquoise"></asp:ListItem>
        <asp:ListItem Value="white" Text="DarkViolet"></asp:ListItem>
        <asp:ListItem Value="white" Text="DeepPink"></asp:ListItem>
        <asp:ListItem Value="black" Text="DeepSkyBlue"></asp:ListItem>
        <asp:ListItem Value="white" Text="DimGray"></asp:ListItem>
        <asp:ListItem Value="black" Text="DodgerBlue"></asp:ListItem>
        <asp:ListItem Value="white" Text="Firebrick"></asp:ListItem>
        <asp:ListItem Value="black" Text="FloralWhite"></asp:ListItem>
        <asp:ListItem Value="white" Text="ForestGreen"></asp:ListItem>
        <asp:ListItem Value="white" Text="Fuchsia"></asp:ListItem>
        <asp:ListItem Value="black" Text="Gainsboro"></asp:ListItem>
        <asp:ListItem Value="black" Text="GhostWhite"></asp:ListItem>
        <asp:ListItem Value="black" Text="Gold"></asp:ListItem>
        <asp:ListItem Value="black" Text="Goldenrod"></asp:ListItem>
        <asp:ListItem Value="white" Text="Gray"></asp:ListItem>
        <asp:ListItem Value="white" Text="Green"></asp:ListItem>
        <asp:ListItem Value="black" Text="GreenYellow"></asp:ListItem>
        <asp:ListItem Value="black" Text="Honeydew"></asp:ListItem>
        <asp:ListItem Value="black" Text="HotPink"></asp:ListItem>
        <asp:ListItem Value="black" Text="IndianRed"></asp:ListItem>
        <asp:ListItem Value="white" Text="Indigo"></asp:ListItem>
        <asp:ListItem Value="black" Text="Ivory"></asp:ListItem>
        <asp:ListItem Value="black" Text="Khaki"></asp:ListItem>
        <asp:ListItem Value="black" Text="Lavender"></asp:ListItem>
        <asp:ListItem Value="black" Text="LavenderBlush"></asp:ListItem>
        <asp:ListItem Value="black" Text="LawnGreen"></asp:ListItem>
        <asp:ListItem Value="black" Text="LemonChiffon"></asp:ListItem>
        <asp:ListItem Value="black" Text="LightBlue"></asp:ListItem>
        <asp:ListItem Value="black" Text="LightCoral"></asp:ListItem>
        <asp:ListItem Value="black" Text="LightCyan"></asp:ListItem>
        <asp:ListItem Value="black" Text="LightGoldenrodYellow"></asp:ListItem>
        <asp:ListItem Value="black" Text="LightGray"></asp:ListItem>
        <asp:ListItem Value="black" Text="LightGreen"></asp:ListItem>
        <asp:ListItem Value="black" Text="LightPink"></asp:ListItem>
        <asp:ListItem Value="black" Text="LightSalmon"></asp:ListItem>
        <asp:ListItem Value="black" Text="LightSeaGreen"></asp:ListItem>
        <asp:ListItem Value="black" Text="LightSkyBlue"></asp:ListItem>
        <asp:ListItem Value="white" Text="LightSlateGray"></asp:ListItem>
        <asp:ListItem Value="black" Text="LightSteelBlue"></asp:ListItem>
        <asp:ListItem Value="black" Text="LightYellow"></asp:ListItem>
        <asp:ListItem Value="black" Text="Lime"></asp:ListItem>
        <asp:ListItem Value="black" Text="LimeGreen"></asp:ListItem>
        <asp:ListItem Value="black" Text="Linen"></asp:ListItem>
        <asp:ListItem Value="black" Text="Magenta"></asp:ListItem>
        <asp:ListItem Value="white" Text="Maroon"></asp:ListItem>
        <asp:ListItem Value="black" Text="MediumAquamarine"></asp:ListItem>
        <asp:ListItem Value="white" Text="MediumBlue"></asp:ListItem>
        <asp:ListItem Value="black" Text="MediumOrchid"></asp:ListItem>
        <asp:ListItem Value="black" Text="MediumPurple"></asp:ListItem>
        <asp:ListItem Value="black" Text="MediumSeaGreen"></asp:ListItem>
        <asp:ListItem Value="white" Text="MediumSlateBlue"></asp:ListItem>
        <asp:ListItem Value="black" Text="MediumSpringGreen"></asp:ListItem>
        <asp:ListItem Value="black" Text="MediumTurquoise"></asp:ListItem>
        <asp:ListItem Value="white" Text="MediumVioletRed"></asp:ListItem>
        <asp:ListItem Value="white" Text="MidnightBlue"></asp:ListItem>
        <asp:ListItem Value="black" Text="MintCream"></asp:ListItem>
        <asp:ListItem Value="black" Text="MistyRose"></asp:ListItem>
        <asp:ListItem Value="black" Text="Moccasin"></asp:ListItem>
        <asp:ListItem Value="black" Text="NavajoWhite"></asp:ListItem>
        <asp:ListItem Value="white" Text="Navy"></asp:ListItem>
        <asp:ListItem Value="black" Text="OldLace"></asp:ListItem>
        <asp:ListItem Value="white" Text="Olive"></asp:ListItem>
        <asp:ListItem Value="white" Text="OliveDrab"></asp:ListItem>
        <asp:ListItem Value="black" Text="Orange"></asp:ListItem>
        <asp:ListItem Value="white" Text="OrangeRed"></asp:ListItem>
        <asp:ListItem Value="black" Text="Orchid"></asp:ListItem>
        <asp:ListItem Value="black" Text="PaleGoldenrod"></asp:ListItem>
        <asp:ListItem Value="black" Text="PaleGreen"></asp:ListItem>
        <asp:ListItem Value="black" Text="PaleTurquoise"></asp:ListItem>
        <asp:ListItem Value="black" Text="PaleVioletRed"></asp:ListItem>
        <asp:ListItem Value="black" Text="PapayaWhip"></asp:ListItem>
        <asp:ListItem Value="black" Text="PeachPuff"></asp:ListItem>
        <asp:ListItem Value="black" Text="Peru"></asp:ListItem>
        <asp:ListItem Value="black" Text="Pink"></asp:ListItem>
        <asp:ListItem Value="black" Text="Plum"></asp:ListItem>
        <asp:ListItem Value="black" Text="PowderBlue"></asp:ListItem>
        <asp:ListItem Value="white" Text="Purple"></asp:ListItem>
        <asp:ListItem Value="white" Text="Red"></asp:ListItem>
        <asp:ListItem Value="black" Text="RosyBrown"></asp:ListItem>
        <asp:ListItem Value="black" Text="RoyalBlue"></asp:ListItem>
        <asp:ListItem Value="white" Text="SaddleBrown"></asp:ListItem>
        <asp:ListItem Value="black" Text="Salmon"></asp:ListItem>
        <asp:ListItem Value="black" Text="SandyBrown"></asp:ListItem>
        <asp:ListItem Value="white" Text="SeaGreen"></asp:ListItem>
        <asp:ListItem Value="black" Text="SeaShell"></asp:ListItem>
        <asp:ListItem Value="white" Text="Sienna"></asp:ListItem>
        <asp:ListItem Value="black" Text="Silver"></asp:ListItem>
        <asp:ListItem Value="black" Text="SkyBlue"></asp:ListItem>
        <asp:ListItem Value="white" Text="SlateBlue"></asp:ListItem>
        <asp:ListItem Value="white" Text="SlateGray"></asp:ListItem>
        <asp:ListItem Value="black" Text="Snow"></asp:ListItem>
        <asp:ListItem Value="black" Text="SpringGreen"></asp:ListItem>
        <asp:ListItem Value="white" Text="SteelBlue"></asp:ListItem>
        <asp:ListItem Value="black" Text="Tan"></asp:ListItem>
        <asp:ListItem Value="black" Text="Teal"></asp:ListItem>
        <asp:ListItem Value="black" Text="Thistle"></asp:ListItem>
        <asp:ListItem Value="white" Text="Tomato"></asp:ListItem>
        <asp:ListItem Value="black" Text="Turquoise"></asp:ListItem>
        <asp:ListItem Value="black" Text="Violet"></asp:ListItem>
        <asp:ListItem Value="black" Text="Wheat"></asp:ListItem>
        <asp:ListItem Value="black" Text="White"></asp:ListItem>
        <asp:ListItem Value="black" Text="WhiteSmoke"></asp:ListItem>
        <asp:ListItem Value="black" Text="Yellow"></asp:ListItem>
        <asp:ListItem Value="black" Text="YellowGreen"></asp:ListItem>
    </asp:DropDownList>
    <select id="test" runat="server">
        <option selected="selected">Choose one</option>
        <option class="bg-dark" value="1">one</option>
        <option class="bg-light" value="2">two</option>
        <option class="bg-red" value="3">three</option>
    </select>
    <select id="Select1" name="Select1" runat="server" onchange="GetSelectedTextValue()">
        <option selected="selected">Choose one</option>
        <option class="bg-dark" value="1">one</option>
        <option class="bg-light" value="2">two</option>
        <option class="bg-red" value="3">three</option>

    </select>

    <input id="Text1" type="text" value="" runat="server" />
</form>
<script type="text/javascript">
    function GetSelectedTextValue() {

        form1.submit();

        return false;

    }
</script>
</body>
</html>

这是背后的代码

Public Class WebForm1
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not (Page.IsPostBack) Then

    End If
    AddHandler Select1.ServerChange, AddressOf Select1_ServerChange
End Sub


Sub Select1_ServerChange(sender As Object, e As EventArgs)
    Text1.Value = Select1.Value & ", " & Select1.Items(Select1.SelectedIndex).Text
End Sub

Private Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles DropDownList1.SelectedIndexChanged
    Text1.Style.Add("background-color", DropDownList1.SelectedItem.ToString)
    Text1.Style.Add("color", DropDownList1.SelectedValue)
    Text1.Value = DropDownList1.SelectedItem.ToString
End Sub
End Class

右侧的html select将填充输入，但asp下拉列表仅返回索引0。

Answer 1

@DaleRekow原因是所有下拉选项的黑色值都相同。您需要为选项提供唯一的值。 – Mohsin Mehmood

这是我遇到的情况的正确答案。谢谢莫辛（Mohsin）

Answer 2

此问题是由于dropdownlist选项的值重复引起的。例如，以下代码将所有ListItems的值设置为black。

 <asp:ListItem Value="black" Text="AliceBlue"></asp:ListItem>
        <asp:ListItem Value="black" Text="AntiqueWhite"></asp:ListItem>
        <asp:ListItem Value="black" Text="Aqua"></asp:ListItem>
        <asp:ListItem Value="black" Text="Aquamarine"></asp:ListItem>

因此，即使用户选择显示文本为Aquamarine的选项，也会选择AliceBlue选项，因为它是第一个值为black的选项。

html选择仅返回第一个选项

2 个答案: