介绍一种取下拉框值以及绑定下拉框数据的方法    这里用到的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. hdoj1260 Tickets (简单DP)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1260 思路: 很简单的DP题,状态方程也比较容易想到,用f[i]表示到第i个人所耗的最短时间,详见代码 ...

  2. codeblocks c++11 pthread

    支持c++11: setting->compiler-> 打上勾即可.(如果没有c++11,那么请更新codeblocks最新版.) pthread_create错误: 由于pthread ...

  3. Selenium原理初步--Android自动化测试学习历程

    章节:自动化基础篇——Selenium原理初步(第五讲) 注:其实所有的东西都是应该先去用,但是工具基本都一样,底层都是用的最基础的内容实现的,测试应该做的是: (1)熟练使用工具,了解各个工具的利弊 ...

  4. 各种replace待续

    http://blog.163.com/chenjie_8392/blog/static/439339842010513128139/

  5. IntentService----意图服务

    意图服务是异步进行的  执行完操作后就会自己消毁(onDestroy方法) 本例为点击按钮下载三张图片相当于连续执行三次意图服务中的onStartcommand方法 import android.ap ...

  6. springboot与elasticsearch

    1.安装elasticsearch 下载elasticsearch docker pull registry.docker-cn.com/library/elasticsearch 运行elastic ...

  7. hadoop应用场景总结

    原文地址 我个人接触hadoop仅仅不到一年,因为是业余时间学习,故进度较慢,看过好多视频,买过好多书,学过基本知识,搭建过伪分布式集群,有过简单的教程式开发,恰逢毕业季,面试过相关岗位,自认为路还很 ...

  8. oralce 存储过程、函数和触发器

    一.存储过程和存储函数 指存储在数据库中供所有用户程序调用的子程序叫存储过程.存储函数.   创建存储过程 用CREATE PROCEDURE命令建立存储过程. 语法: create [or repl ...

  9. .net 4.0的Lazy<T>方法,反射实现延迟加载。

    //自己山寨.public class YaLazy<T> { private bool _isValueCreated = false; public bool IsValueCreat ...

  10. db2 统计信息 runstats

    1.runstats的语法:runstats on table [模式名].[表名] with distribution and detailed indexes all注意:你可以在所有列上,或者仅 ...