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=" ...
随机推荐
- dfs小练 【dfs】
1.前n个自然数的所有排列: #include <iostream> #include <cstdio> #include <cstring> using name ...
- 手机屏幕左下角显示Fastboot mode是什么情况?
刚给老婆买了一个多月的魅蓝NOTE,几天前开不了机,黑屏但左下角显示:Fastboot mode…….无论按电源键还是电源键加音量加键进行重置都没有任何作用,关后自己会重启黑屏左下角显示Fastboo ...
- css学习-css引入&css选择
一.引入css的方式,一共有4种,我们只需要掌握三种就可以了,@import的方法我们不做掌握 1.第一种引入的方法 <!--1.第一种引入css的方法--> <h1 style=& ...
- 对.NET中导出数据到EXCEL的几种方法探讨
最近在做一个报表系统的时候,需要把DATASET中的数据导到EXCEL当中,于是在网上找了一遍,发现了好几种方法,本来以为应该差不多,但后来经过一一试用后,发现在性能上真的差别很大,现在就介绍一下,同 ...
- CentOS下zabbix监控mysql5.6版本主从
目录 CentOS下zabbix监控mysql5.6版本主从 1. Zabbix添加自定义监控流程 2. 具体步骤 1. 编写监控mysql主从脚本 2. mysql赋权 3. 查看脚本执行效果 4. ...
- 挪过来的spring mvc 的入门 介绍
目录 一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明 ...
- Codeforces 689C. Mike and Chocolate Thieves 二分
C. Mike and Chocolate Thieves time limit per test:2 seconds memory limit per test:256 megabytes inpu ...
- Jmeter将HTTP request报文体中的字符串转换为大写
<awd><client id='${__javaScript("${IndividualID}".toUpperCase())}'><member ...
- 如何从dvi生成pdf--------亲测有效果.
用里面第二个命令. http://blog.csdn.net/u014682350/article/details/46482477
- Cannot initialize Cluster. Please check your configuration for mapreduce.framework.name and the correspond server addresses.
解决方法: <dependency> <groupId>org.apache.hadoop</groupId> <artifactId>hadoop-m ...