介绍一种取下拉框值以及绑定下拉框数据的方法    这里用到的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文本值的更多相关文章

  1. JavaScript获取Select下拉框Option的Value和Text值的方法

    Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...

  2. js获取select下拉框中的值

    现在有一id为userType的下拉框,怎么获取选中的值: 用户类型: <select name="type" id="userType"> < ...

  3. js获取select下拉框选中的的值和判断checkbox是否选中状态

    html: <select id="lib_select"  name="">   <option   value="1" ...

  4. js获取select下拉框选项的值

    var onchange="getBatch(this.options[this.options.selectedIndex].value)"

  5. js&jquery 获取select下拉框的值、文本内容、自定义属性

      js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...

  6. JavaScript获取select下拉框中的第一个值

    JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  7. js如何获取select下拉框的value以及文本内容

    select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...

  8. 获取select下拉框的value以及文本内容

    select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...

  9. Javascript获取select下拉框选中的的值

    现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test"  name=" ...

随机推荐

  1. dfs小练 【dfs】

    1.前n个自然数的所有排列: #include <iostream> #include <cstdio> #include <cstring> using name ...

  2. 手机屏幕左下角显示Fastboot mode是什么情况?

    刚给老婆买了一个多月的魅蓝NOTE,几天前开不了机,黑屏但左下角显示:Fastboot mode…….无论按电源键还是电源键加音量加键进行重置都没有任何作用,关后自己会重启黑屏左下角显示Fastboo ...

  3. css学习-css引入&css选择

    一.引入css的方式,一共有4种,我们只需要掌握三种就可以了,@import的方法我们不做掌握 1.第一种引入的方法 <!--1.第一种引入css的方法--> <h1 style=& ...

  4. 对.NET中导出数据到EXCEL的几种方法探讨

    最近在做一个报表系统的时候,需要把DATASET中的数据导到EXCEL当中,于是在网上找了一遍,发现了好几种方法,本来以为应该差不多,但后来经过一一试用后,发现在性能上真的差别很大,现在就介绍一下,同 ...

  5. CentOS下zabbix监控mysql5.6版本主从

    目录 CentOS下zabbix监控mysql5.6版本主从 1. Zabbix添加自定义监控流程 2. 具体步骤 1. 编写监控mysql主从脚本 2. mysql赋权 3. 查看脚本执行效果 4. ...

  6. 挪过来的spring mvc 的入门 介绍

    目录  一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明 ...

  7. Codeforces 689C. Mike and Chocolate Thieves 二分

    C. Mike and Chocolate Thieves time limit per test:2 seconds memory limit per test:256 megabytes inpu ...

  8. Jmeter将HTTP request报文体中的字符串转换为大写

    <awd><client id='${__javaScript("${IndividualID}".toUpperCase())}'><member ...

  9. 如何从dvi生成pdf--------亲测有效果.

    用里面第二个命令. http://blog.csdn.net/u014682350/article/details/46482477

  10. 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 ...