在进行表单元素的操作时，难免会遇到对option元素的挑选，下面的示例代码能够很好的获取到你option元素选择的值，如果要传递给后端，可通过ajax或者其他方式传递即可。
示例代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>获取option元素</title>

</head>

<body>

  <div class="item-content">

	<div class="item-inner">

	  <div class="item-title label">编程语言</div>

	  <div class="item-input">

		<select id="program-language">

			<option data-id="Java">Java</option>

			<option data-id="Python">Python</option>

			<option data-id="Android">Android</option>

			<option data-id="C#">C#</option>

			<option data-id="Ruby">Ruby</option>

			<option data-id="JavaScript">JavaScript</option>

		</select>

	</div>

  </div>

	<div class="content-block">

      <div class="row">

        <div class="col-50">

			<a href="#" class="button button-big button-fill button-success" id="submit">提交</a>

		</div>

      </div>

    </div>

<script type='text/javascript' src='C:/Users/Hyxiao/Desktop/option/jquery-3.2.1.js' charset='utf-8'></script>

<script type='text/javascript'>

	$('#submit').click(function() {

		var  language = '';

		language =

			$('#program-language').find('option').not(function() {

				return !this.selected;

			}).data('id')

		console.log(language);

	});

</script>

</body>

</html>

效果图如下：

获取HTML网页中option标签元素的值的更多相关文章

  1. java获取单张网页中img标签中的src

    /** * 得到网页中图片的地址 */ public static List<String> getImgStr(String htmlStr) { List<String> ...

  2. 关于Oxygen版 Eclipse JSP或html 中<option>标签嵌入jstl 如<c:if>出现报错

    Oxygen版 Eclipse JSP或html 中<option>标签嵌入jstl 如<c:if>出现报错 好好的学框架的整合,结果在<option>中加入< ...

  3. .NET获取Html字符串中指定标签的指定属性的值

    using System.Text; using System.Text.RegularExpressions; //以上为要用到的命名空间 /// <summary> /// 获取Htm ...

  4. Python 网络爬虫 009 (编程) 通过正则表达式来获取一个网页中的所有的URL链接，并下载这些URL链接的源代码

    通过 正则表达式 来获取一个网页中的所有的 URL链接,并下载这些 URL链接 的源代码 使用的系统:Windows 10 64位 Python 语言版本:Python 2.7.10 V 使用的编程 ...

  5. JS事件 什么是事件？JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

    什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...

  6. C#使用正则表达式获取HTML代码中a标签里包含指定后缀的href的值

    //C#使用正则表达式获取HTML代码中a标签里包含指定后缀的href的值,表达式如下: Regex regImg = new Regex(@"(?is)<a[^>]*?href ...

  7. form表单元素中disabled的元素的值不会提交到服务器

    1.表单元素中disabled的元素的值不会提交到服务器,后台获取的值为null <form id="myForm" action="#" method= ...

  8. 输出有序数组的中两个元素差值为指定值diff的两个元素

    题目: 输出有序数组的中两个元素差值为指定值diff的两个元素. 思路: 这与输出两个元素的和的值为一定值类似,需要两个指针,不同的是:指针不是一左一右,而是一前一后. 如果差值等于diff,则返回: ...

  9. jquery中修改一个元素的值或内容

    jquery中修改一个元素的值或内容,比如数值增加可以使用这个方法取得原值并+1 $this.text(function(i,ot){return Number(ot)+1;});

随机推荐

  1. Quartz任务调度(2)CronTrigger定制个性化调度方案

    Cron表达式 1. 时间字段与基本格式 Cron表达式有6或7个空格分割的时间字段组成: 位置 时间域名 允许值 允许的特殊字符 1 秒 0-59 ,-*/ 2 分支 0-59 ,-*?/ 3 小时 ...

  2. ConcurrentModificationException异常原因和解决方法

    一.ConcurrentModificationException异常出现的原因 先看下面这段代码: public class Test { public static void main(Strin ...

  3. REST设计风格：你写的 RESTful API 到第几层了?

    理解REST 在理解其真正概念前,我们先来明确: REST它的核心思想是面向资源的抽象(相对于RPC就是面向过程抽象),它是一种设计风格的指导,而非具有较强约束的协议. REST源于Roy Thoma ...

  4. OpenCV waitKey 无法正常捕捉方向键（上下左右），总结和解决方案，可以用waitKeyEx

    在win10+python+opencv3.4.5,测试 while True: key = cv2.waitKey(0) print('key =', key) 依次按上.下.左.右方向键,输出: ...

  5. Docker容器管理——Docker容器常用命令

    1.查看所有的容器 docker ps 2.查看运行的容器 docker ps -a 3.启动.停止.重启docker容器 docker start ... docker stop ... docke ...

  6. JDK方法区、元空间区别 & String.intern相关面试题

    一.方法区.永久代.元空间 1.方法区.永久代 方法区也是各个线程共享的内存区域,它用于存储已经被虚拟机加载的类信息.常量.静态变量.即时编译器编译后的代码等数据.方法区域又被称为"永久代& ...

  7. 优化技术专题-线程间的高性能消息框架-深入浅出Disruptor的使用和原理

    前提概要 简单回顾 jdk 里的队列: 阻塞队列: ArrayBlockingQueue主要通过:数组(Object[])+ 计数器(count)+ ReetrantLock的Condition (n ...

  8. 最详尽的 JS 原型与原型链终极详解(1)(2)(3)===转载

    转载===方便以后复习 原文网址:https://www.jianshu.com/p/dee9f8b14771 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为 ...

  9. Linux内核编译配置脚本

    环境 宿主机平台:Ubuntu 16.04.6 目标机:iMX6ULL Linux内核编译配置脚本 在linux开发过程中熟练使用脚本可以大大简化命令行操作,同时对于需要经常重复操作的指令也是一种备忘 ...

  10. 网络协议之TCP和UDP

    TCP/IP协议: 传输控制协议/因特网互联协议( Transmission Control Protocol/Internet Protocol),是Internet最基本.最广泛的协议.它定义了计 ...