js获取select下拉框的value值和text文本值
介绍一种取下拉框值以及绑定下拉框数据的方法 这里用到的jquery-ui-multiselect插件
1、前台html代码
<span class="ModuleFormFieldLabel" style="float: left; padding-top: 3px;">品类:</span>
<asp:HiddenField runat="server" ID="hidCarType" /> //隐藏控件,用来存放select value值,传到后台显示下拉数据用
<select id="mulselCarType" name="mulselCarType" multiple="multiple"> //multiple为多选属性
<%=this.htmlCarType %> //后台绑定数据
</select> <asp:HiddenField ID="hid_Cartype" runat="server" /> //隐藏控件,用来存放select text文本值,传到后台显示文本值
<asp:Label ID="x_lb_Cartype" runat="server" Text="品类:" Visible="false"></asp:Label>
<span style="white-space:normal;">
<asp:Literal ID="lbCartype" runat="server" ></asp:Literal> //lable用来在页面显示文本值
</span>
2、获取值js代码
function getValue() {
//获取text值传入后台
var objType = $("#mulselCarType").find("option:selected"); //找到控件id,并且找到被选中的option
var strType = []; //定义数组
for (var i = 0; i < objType.length; i++) {
strType[i] = objType[i].text; //循环option的长度,取到text值放入数组
}
document.getElementById('<%=hid_coust.ClientID %>').value = strType; //将数组中的值放入隐藏控件(默认每个字符中间使用','隔开,英文',')
//获取text值传入后台
var objCarType = [];
$("#mulselCarType").find("option:selected").each(function () {
objCarType.push($(this).text()); //找到id,找到选中的option,直接each遍历,将text值push到数组
});
document.getElementById('<%=hid_Cartype.ClientID %>').value = objCarType.join(","); //将数组的值放入隐藏控件,join(","),字符中间用中文","隔开
//获取value值传入后台
var carType = []; //multiselect是jquery-ui-multiselect插件,方法详见官方文档
$("#mulselCarType").multiselect('getChecked').each(function () { carType.push($(this).val()); });
document.getElementById("<%=hidCarType.ClientID %>").value = carType.join(",");
};
3、后台取值赋值代码
public string htmlCarType = string.Empty; //品类
private void InitCarType()
{
if (!string.IsNullOrEmpty(hidAgent.Value))
{
using (SqlDBAccess dbAccess = new SqlDBAccess(AppFunction.ConnectionString))
{
//连接数据将数据从表取出,循环放入option,绑定下拉显示数据
DataTable dt = dbAccess.ExecuteTable("select agent_id,name from tb_agent where brand_id in (" + hidAgent.Value + ") and status='ready'");
System.Text.StringBuilder sb = new System.Text.StringBuilder();
foreach (DataRow dr in dt.Rows)
{
sb.AppendLine(string.Format("<option value='{0}'>{1}</option>", dr["agent_id"].ToString(), dr["name"].ToString()));
}
this.htmlCarType = sb.ToString();
}
}
}
//品类
if (hid_Cartype.Value == "") //将文本值放入lable控件显示
x_lb_Cartype.Visible = false;
else
x_lb_Cartype.Visible = true;
lbCartype.Text = hid_Cartype.Value;

js获取select下拉框的value值和text文本值的更多相关文章
- JavaScript获取Select下拉框Option的Value和Text值的方法
Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...
- js获取select下拉框中的值
现在有一id为userType的下拉框,怎么获取选中的值: 用户类型: <select name="type" id="userType"> < ...
- js获取select下拉框选中的的值和判断checkbox是否选中状态
html: <select id="lib_select" name=""> <option value="1" ...
- js获取select下拉框选项的值
var onchange="getBatch(this.options[this.options.selectedIndex].value)"
- js&jquery 获取select下拉框的值、文本内容、自定义属性
js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...
- JavaScript获取select下拉框中的第一个值
JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- js如何获取select下拉框的value以及文本内容
select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...
- 获取select下拉框的value以及文本内容
select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...
- Javascript获取select下拉框选中的的值
现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test" name=" ...
随机推荐
- scanf与printf
scanf格式控制的完整格式: % * m l或h 格式字符 ①格式字符与printf函数中的使用方式相同,以%d.%o.%x.%c.%s.%f.%e,无%u格式.%g ...
- Housewife Wind(边权树链剖分)
Housewife Wind http://poj.org/problem?id=2763 Time Limit: 4000MS Memory Limit: 65536K Total Submis ...
- 控制span的width属性及display属性值的选择
给span设置width样式,会发现并没有改变它的宽度,但有时候我们需要给它设置固定的宽度,那么就可以设置它的display样式,改变span的显示模式就好了. span默认显示模式是inline,无 ...
- Asp.net实现同页面内多图片自动上传并带预览显示
FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理: 此方法适合针对有后台生成的图片相关内容,例如购物网站商品展示页面中的封面图片,图片的数量由后台访问数据库,并加载到页面.这种 ...
- python之多并发socket
先看socket多并发的服务端的代码,这里是用多线程实现的多并发socketserver import socketserver # socketserver有四个基本的类,后两个不常用,这4个类处理 ...
- 安装Oracle客户端寻找配置文件tnsnames.ora
# tnsnames.ora Network Configuration File: D:\app\Administrator\product\11.2.0\dbhome_1\network\admi ...
- Nginx配置杂记(转)
转至:http://www.cnblogs.com/kuangke/p/5619400.html Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP代理服务器,相较 ...
- windows下用tcc编译Lua
脚本来源:Demon's Blog,http://demon.tw/software/compile-lua-with-tcc.html 版权归原作者所有 使用方法: 1.下载tcc编译器,本文解压目 ...
- linux下安装oracle数据库详细教程
一.安装yum源 下载或拷贝RedHat的iso镜像到本地,比如 /repo/iso/ rhel-server-6.6-x86_64-dvd.iso 1.建立ISO文件存放目录(/repo/iso)和 ...
- ubuntu下常用操作
屏幕截图: 可以用ubuntu自带的截图软件:gnome-screenshot. 该工具截图区域并且复制到剪切板命令为 gnome-screenshot -c -a,可以给该命令添加快捷方式,alt ...