在进行表单元素的操作时，难免会遇到对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. Workflow Core + asp.net core 5.0 实现简单审批工作流

    我们知道企业业务系统到处都可以审批工作流的,但也很少有像OA系统一样复杂多级多条件的审批工作流需要设计,所以我们需要一个轻量级的容易上手的workflow框架,通过GitHub,我发现danielge ...

  2. netty系列之:轻轻松松搭个支持中文的服务器

    目录 简介 netty的HTTP支持 netty中使用HTTP的原理 100 (Continue) Status 为netty搭建HTTP服务器 总结 简介 之前讲了那么多关于netty的文章,都是讲 ...

  3. Go版本依赖--伪版本

    目录 1.简介 2. 什么是伪版本 3. 伪版本风格 4. 如何获取伪版本 1.简介 在go.mod中通常使用语义化版本来标记依赖,比如v1.2.3.v0.1.5等.因为go.mod文件通常是go命令 ...

  4. Android手机 自动批量发朋友圈

    做了各种对比之后,还是这个微商工具最好用

  5. uboot命令简介

    uboot下的命令行 1.典型嵌入式linux系统启动过程: 嵌入式系统上电后先执行uboot.然后uboot负责初始化DDR,初始化Flash,然后将OS从Flash中读取到DDR中,然后启动OS( ...

  6. 基于Ubuntu18.04一站式部署(python-mysql-redis-nginx)

    基于Ubuntu18.04一站式部署 Python3.6.8的安装 1. 安装依赖 ~$ sudo apt install openssl* zlib* 2. 安装python3.6.8(个人建议从官 ...

  7. linux主机安全加固-个人经验

    说明:我并没有一个系统的网络安全知识体系,随笔里面提到的内容是个人在从事运维行业这几年中总结出来的一点经验,仅供大家参考. 说到linux主机安全加固,我可以想到的就是三个方向吧,基线整改.访问控制和 ...

  8. golang接口类型判断 VS 接口类型查询

    接口类型判断:接口.(类型) 1.类型查询:查询接口数据对应的类型是否是指定的类型 2.类型转化:如果是指定类型,就将数据转化为接口类型查询: 1.reflect.TypeOf(接口) 2.接口.(T ...

  9. Elasticsearch-head插件的安装与配置

    第一种: 通过浏览器添加插件 通过chrome安装插件的方式提供一个可操作es的图形化界面. 在chrome 浏览器中,通过"扩展程序" 添加 elasticsearch head ...

  10. matlab函数randperm()

    randperm()会返回一个行向量. 1,randperm(n) 输出一个1×n的矩阵,元素值为1~n的整数,每个元素只出现一次,元素的顺序是随机的. 2,randperm(n,k) 输出一个1×k ...