js获取select下拉框的value值和text文本值

时间:2021-10-10 00:10:30

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

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"> &lt ...

  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&amp&semi;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=&quot ...

随机推荐

  1. C&plus;&plus;11之std&colon;&colon;function和std&colon;&colon;bind

    std::function是可调用对象的包装器,它最重要的功能是实现延时调用: #include "stdafx.h" #include<iostream>// std ...

  2. mysql中影响myisam引擎写入性能的三项设置

    一.LOW_PRIORITY1.对于myisam默认是写操作优先,读操作滞后.通过该项更改,可以使读操作优先,写操作在有空闲的时候再写入.但该项可能在理论上造成,写被永远阻塞. SQL语句中使用示例: ...

  3. makfile

    1. Makefile 简介 Makefile 是和 make 命令一起配合使用的. 很多大型项目的编译都是通过 Makefile 来组织的, 如果没有 Makefile, 那很多项目中各种库和代码之 ...

  4. Codeforces Round &num;313 &lpar;Div&period; 2&rpar;B&period;B&period; Gerald is into Art

    B. Gerald is into Art Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/problemset/ ...

  5. unicode编码、字符的转换和得到汉字的区位码

    一:unicode编码.字符的转换截图 二:unicode编码.字符的转换代码 using System; using System.Collections.Generic; using System ...

  6. log4j日志记录级别是如何工作?

    级别p的级别使用q,在记录日志请求时,如果p>=q启用.这条规则是log4j的核心.它假设级别是有序的.对于标准级别它们关系如下:ALL < DEBUG < INFO < WA ...

  7. 西安活动 &vert; 4月20日「拥抱开源,又见&period;NET :云时代 • 新契机」

    云计算日渐兴起,成为提升企业效率和生产力的最终解决方案,而云时代也为软件开发模式带来了翻天覆地的变化.可以说 .NET Core就是这个时代催生的产物.自2016年 .NET Core 1.0 发布以 ...

  8. ACM-ICPC 2018 徐州赛区网络预赛 C Cacti Lottery&lpar;期望&plus;暴力&rpar;

    https://nanti.jisuanke.com/t/31455 题意 给一个3*3的方格填入 1-9 九个数 有些数是已知的,有些数是对方已知但我未知的,有些数是大家都未知的 我要计算取得最大的 ...

  9. Jmeter&lowbar;24个常用函数

    JMeter提供了很多函数,如果能够熟练使用,可以为脚本带来很多方便. JMeter函数是一种特殊值,可用于除测试计划外的任何组件. 函数调用的格式如下所示:${__functionName(var1 ...

  10. Javascript高级编程学习笔记(25)—— 函数表达式(3)模仿块级作用域

    昨天写了闭包 今天就来聊聊块级作用域的事情 在绝大多数编程语言中,都有块级作用域这个概念 什么是块级作用域呢? 前面我们在刚开始讲的时候说过,JS中的大括号(不在赋值运算符的后面)表示代码块 块级作用 ...