在进行表单元素的操作时，难免会遇到对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. windows下删除文件夹里的 .svn

    windows下: 删除文件夹里的 .svn, cmd  进入相应目录  运行    for /r ./ %a in (./) do @if exist "%a/.svn" rd ...

  2. git tag的用法及意义

    git tag 介绍 命令是用来给当前项目状态(在某次commit后)打标签的,目的是便于以后将项目状态回滚到当时打标签的状态.可以把它与虚拟机的snapshot(快照)进行类比. 回想当时在看< ...

  3. ES6中class的继承

    extends 子类的继承 super(); 调用父类的构造方法,只能在子类中执行 继承可以让子类获得父类的方法 属性,可以扩充 增加新的方法 属性等 父类(基类)--被继承的类 子类--继承后的类 ...

  4. Qt 自定义事件

    Qt 自定义事件很简单,同其它类库的使用很相似,都是要继承一个类进行扩展.在 Qt 中,你需要继承的类是 QEvent. 继承QEvent类,你需要提供一个QEvent::Type类型的参数,作为自定 ...

  5. Excel 列名转int索引（C#版）

    /// <summary> /// 获取Excel实际列索引 /// </summary> /// <param name="columnName"& ...

  6. Java中使用DOM4J来生成xml文件和解析xml文件

    一.前言 现在有不少需求,是需要我们解析xml文件中的数据,然后导入到数据库中,当然解析xml文件也有好多种方法,小编觉得还是DOM4J用的最多最广泛也最好理解的吧.小编也是最近需求里遇到了,就来整理 ...

  7. Gitlab（2）- centos7.x 下安装社区版 Gitlab 以及它的配置管理

    前置准备:虚拟机安装以及配置相关 包含安装 centos7.8 虚拟机.设置静态 ip 等 https://www.cnblogs.com/poloyy/category/1703784.html 注 ...

  8. IPSec协议框架

    文章目录 1. IPSec简介 1.1 起源 1.2 定义 1.3 受益 2. IPSec原理描述 2.1 IPSec协议框架 2.1.1 安全联盟 2.1.2 安全协议 报文头结构 2.1.3 封装 ...

  9. 一文读懂Redis

    目录结构如下: 简介 Redis是一个高性能的key-value数据库.Redis对数据的操作都是原子性的. 优缺点 优点: 基于内存操作,内存读写速度快. Redis是单线程的,避免线程切换开销及多 ...

  10. Dockerfile 自动制作 Docker 镜像（一）—— 基本命令

    Dockerfile 自动制作 Docker 镜像(一)-- 基本命令 前言 a. 本文主要为 Docker的视频教程 笔记. b. 环境为 CentOS 7.0 云服务器 c. 上一篇:手动制作Do ...