SelectedValue与SelectedItem.Value的区别

本文详细解读了ASP.NET DropDownList中的selectedIndex、selectedItem、selectedValue等关键属性,并通过实例展示了如何在页面中使用这些属性实现下拉选择功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

public virtual ListItem SelectedItem {
    get {
        int selectedIndex = this.SelectedIndex;
        if (selectedIndex >= 0) {
            return this.Items[selectedIndex];
        }
        return null;
    }
}
public virtual string SelectedValue {
    get {
        int selectedIndex = this.SelectedIndex;
        if (selectedIndex >= 0) {
            return this.Items[selectedIndex].Value;
        }
        return string.Empty;
    }
}

在没有选定任何项的情况下,SelectedValue默认值是string.Empty,而SelectedItem默认值是null(也就是说通过SelectedItem.Value可能发生异常)

1. selectedIndex——指的是dropdownlist中选项的索引,为int,从0开始,可读可写

2. selectedItem——指的是选中的dropdownlist中选项,为ListItem,只读不写

3. selectedValue——指的是选中的dropdownlist中选项的值,为string, 只读不写

4. selectedItem.Text——指的是选中的dropdownlist中选项的文本内容,与selectedItems的值一样为string,可读可写

5. selectedItem.value——指的是选中的dropdownlist中选项的值,与selectedValue的值一样,为string,可读可写

光看文字可能不太理解,我也是通过程序来加深理解的,下面举个例子:

前台代码:

 

代码
1 view plaincopy to clipboardprint?
2   <% @ Page Language = " C# " AutoEventWireup = " true " CodeFile = " dropdown.aspx.cs " Inherits = " dropdown " %>
3
4   <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
5
6   < html xmlns ="http://www.w3.org/1999/xhtml" >
7   < head runat ="server" >
8 < title > 无标题页 </ title >
9 </ head >
10 < body >
11 < form id ="form1" runat ="server" >
12 < div >
13 < asp:DropDownList ID ="DropDownList1" runat ="server" >
14 < asp:ListItem Value ="1" > 北京 </ asp:ListItem >
15 < asp:ListItem Value ="2" > 上海 </ asp:ListItem >
16 < asp:ListItem Value ="3" > 广州 </ asp:ListItem >
17 </ asp:DropDownList >
18 < asp:Button ID ="Button1" runat ="server" OnClick ="Button1_Click" Text ="check" />< br />
19 < asp:Label ID ="Label1" runat ="server" Text ="" ></ asp:Label >
20 < br />
21 < asp:Label ID ="Label2" runat ="server" Text ="" ></ asp:Label >
22 < br />
23 < asp:Label ID ="Label3" runat ="server" Text ="" ></ asp:Label >< br />
24 < asp:Label ID ="Label4" runat ="server" Text ="" ></ asp:Label >
25 < br />
26 < asp:Label ID ="Label5" runat ="server" Text ="" ></ asp:Label >
27
28 </ div >
29 </ form >
30 </ body >
31 </ html >

 

 

 

后台代码:

 

代码
1 using System;
2 using System.Data;
3 using System.Configuration;
4 using System.Collections;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.WebControls;
9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11
12 public partial class dropdown : System.Web.UI.Page
13 {
14 protected void Page_Load( object sender, EventArgs e)
15 {
16
17 }
18 protected void Button1_Click( object sender, EventArgs e)
19 {
20 Label1.Text = " selectedIndex= " + DropDownList1.SelectedIndex;
21 Label2.Text = " selectedItem= " + DropDownList1.SelectedItem;
22 Label3.Text = " selectedValue= " + DropDownList1.SelectedValue;
23 Label4.Text = " selectedItem.text= " + DropDownList1.SelectedItem.Text;
24 Label5.Text = " selectedItem.value= " + DropDownList1.SelectedItem.Value;
25 }
26 }

 

 

 

运行效果如下:

选择北京时      选择上海时     选择广州时

<template> <div class="select"> <button class="trigger" @click="toggleMenu" @input="handleChange"> {{ selectedLabel || placeholder }} <span class="arrow" :class="{ 'rotated': isOpen }">▼</span> </button> <div class="menu" :class="{ 'menu_open': isOpen }"> <template v-for="item in selectOptions"> <div class="option" @click="handleClick(item)" :class="{ 'selected': item.selected }"> <span>{{ item.label }}</span> <!-- <span class="left-content">{{ item.label }}</span> --> </div> </template> </div> </div> <div v-if="checkBool" style="color: red;">{{ errorMessage }}</div> <slot></slot> </template> <script setup> const model = defineModel() const selectedLabel = ref('') const selectOptions = ref([]) const isOpen = ref(false) const props = defineProps({ placeholder: { type: String, default: '请选择' }, options: { type: Array, default: [] }, //top rules: { type: Array, default: () => [] } }) // top const addChildClect = inject('addChildClect'); function validateItem() { debugger for (let rule of props.rules) { // 必填校验 if (rule.required && !model.value) { errorMessage.value = rule.message || '请输入内容'; checkBool.value = true; return true; // 校验失败 } checkBool.value = false; return false; // 校验成功 } } // blur 事件触发校验 function handleBlur() { const blurRules = props.rules.filter(rule => rule.trigger === 'blur'); if (blurRules.length > 0) { validateItem(); } } // change/input 事件触发校验 function handleChange() { const changeRules = props.rules.filter(rule => rule.trigger === 'change'); if (changeRules.length > 0) { validateItem(); } } // top const emit = defineEmits(['change']) function handleClick(item) { model.value = item.value toggleMenu() } function setOtherOptionDefault(value) { selectOptions.value.forEach(item => { if (item.value != value) { item.selected = false } else { item.selected = true } }) } function toggleMenu() { isOpen.value = !isOpen.value } provide('pushOptions', item => { selectOptions.value.push(item) }) watch( () => model, // 监听的属性 (newVal, oldVal) => { // 变化时的回调函数 if (newVal != null && newVal != undefined && newVal.value != null && newVal.value != undefined) { selectOptions.value.forEach(item => { if (item.value == newVal.value) { selectedLabel.value = item.label setOtherOptionDefault(newVal.value) } }) } else { selectedLabel.value = "" } }, { deep: true } ); onMounted(() => { if (props.options.length > 0) { selectOptions.value = props.options } selectOptions.value.forEach(item => { if (item.value == model.value) { selectedLabel.value = item.label setOtherOptionDefault(model.value) } }) // top if (addChildClect) { addChildClect({ validate: validateItem }); } }) </script> <style scoped lang="scss"> .option { width: 100%; padding: 3px 0px 3px 0px; &:hover { background-color: #fa0808; } span { margin-left: 15px; font-size: 14px; user-select: none; } } .selected { color: #409eff; } .select { position: relative; width: 200px; } .trigger { width: 100%; padding: 8px 12px; border: 1px solid #ccc; background-color: #fff; text-align: left; cursor: pointer; } .arrow { float: right; transition: transform 0.3s ease; } .arrow.rotated { transform: rotate(180deg); } .menu { position: absolute; top: 100%; left: 0; width: calc(100% - 1px); height: 0px; overflow-x: auto !important; overflow-y: auto !important; border: 1px solid #ccc; border-top: none; background: white; z-index: 10; transition: height 0.3s ease; &::-webkit-scrollbar { width: 5px; /* 垂直滚动条宽度 */ height: 5px; /* 水平滚动条高度(可选) */ } /* 滚动条滑块部分 */ &::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.3); border-radius: 4px; } /* 滚动条轨道 */ &::-webkit-scrollbar-track { background-color: #f1f1f1; } } .menu.menu_open { height: 100px !important; } .fade-enter-active, .fade-leave-active { transition: opacity 0.2s; } .fade-enter-from, .fade-leave-to { opacity: 0; } </style>  当我没选择的时候想打出信息
最新发布
07-18
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值