<html>
<head>
<title>select选择标签</title>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript">
$(function(){
$("#test").append("<option value='tj'>天津</option>");　　<!-- 添加标签-->
$("#test").val("sh");　　　　　　　　　　　　　　　　　　　　<!-- 选择元素-->　　　　　　　　
$("#test").html("<option value='gd'>广东</option>");　　  <!-- 设置替换元素-->
$("#test").text("潮州");　　　　　　　　　　　　　　　　　　  <!-- 将select内部内容替换为“潮州”-->

});
</script>
</head>
<div>
<select value="" id="test">
<option value='bj'>北京</option>
<option value='sh'>上海</option>
</select>
</<div>
</html>

--------------------------------------

每一次操作select的时候，总是要出来翻一下资料，不如自己总结一下，以后就翻这里了。

比如<select class="selector"></select>

1、设置value为pxx的项选中

$(".selector").val("pxx");

2、设置text为pxx的项选中

　　var m= $(".selector").find("option[value='sh']").attr("selected",true);-----》value好用。
　　$("#test option[value='sh']").prop("selected",true);

$(".selector").find("option[text='pxx']").attr("selected",true);----》这个不对。

这里有一个中括号的用法，中括号里的等号的前面是属性名称，不用加引号。很多时候，中括号的运用可以使得逻辑变得很简单。

3、获取当前选中项的value

$(".selector").val();

4、获取当前选中项的text

$(".selector").find("option:selected").text();

这里用到了冒号，掌握它的用法并举一反三也会让代码变得简洁。

很多时候用到select的级联，即第二个select的值随着第一个select选中的值变化。这在jQuery中是非常简单的。

如：$(".selector1").change(function(){

// 先清空第二个

$(".selector2").empty();

// 实际的应用中，这里的option一般都是用循环生成多个了

var option = $("<option>").val(1).text("pxx");

$(".selector2").append(option);

});

html-select的更多相关文章

  1. 最全的ORACLE-SQL笔记

    -- 首先,以超级管理员的身份登录oracle sqlplus sys/bjsxt as sysdba --然后,解除对scott用户的锁 alter user scott account unloc ...

  2. Matplotlib数据可视化（6）：饼图与箱线图

    In [1]: from matplotlib import pyplot as plt import numpy as np import matplotlib as mpl mpl.rcParam ...

  3. SELECT INTO 和 INSERT INTO SELECT 两种表复制语句

    Insert是T-sql中常用语句,Insert INTO table(field1,field2,...) values(value1,value2,...)这种形式的在应用程序开发中必不可少.但我 ...

  4. select、poll、epoll之间的区别总结

    select.poll.epoll之间的区别总结 05/05. 2014 select,poll,epoll都是IO多路复用的机制.I/O多路复用就通过一种机制,可以监视多个描述符,一旦某个描述符就绪 ...

  5. LINQ to SQL Select查询

    1. 查询所有字段 using (NorthwindEntities context = new NorthwindEntities()) { var order = from n in contex ...

  6. ADO.NET一小记-select top 参数问题

    异常处理汇总-后端系列 http://www.cnblogs.com/dunitian/p/4523006.html 最近使用ADO.NET的时候,发现select top @count xxxx 不 ...

  7. iosselect：一个js picker项目，在H5中实现IOS的select下拉框效果

    具体文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的pi ...

  8. SQL Server中SELECT会真的阻塞SELECT吗？

    在SQL Server中,我们知道一个SELECT语句执行过程中只会申请一些意向共享锁(IS) 与共享锁(S), 例如我使用SQL Profile跟踪会话86执行SELECT * FROM dbo.T ...

  9. (转载) Linux IO模式及 select、poll、epoll详解

    注:本文是对众多博客的学习和总结,可能存在理解错误.请带着怀疑的眼光,同时如果有错误希望能指出. 同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的上下文下给出的答案 ...

  10. 基于select的python聊天室程序

    python网络编程具体参考<python select网络编程详细介绍>. 在python中,select函数是一个对底层操作系统的直接访问的接口.它用来监控sockets.files和 ...

随机推荐

  1. LeetCode OJ：Three Sum（三数之和）

    Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...

  2. mcake活动维护常见问题记录【wap端】 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★

    ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ wap端问题及解决方法 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ 一.wap端弹窗 .Dialogbg-Select{ background-co ...

  3. 【python】numpy pandas 特性（随时更新）

    [value map] 用df.replace(dict)可以解决.但是如果dict太大,会非常非常慢. [array相加的维度规律][广播] (2,3) 能和 (3,) 相加,不能和(2,)相加 ( ...

  4. Flask 的整体流程

    Flask 的整体流程 封装 requestContext 对象, full_dispatch_request(视图函数 执行), response返回 从app.run() 开始 -->> ...

  5. 项目工程结构说明(Internal)

    注意:想要彻底把Internal关键字搞清楚,就耐着性子把她读完.当然了这篇文章只是对其他文章的总结.也算是引用吧.主要还是为了把知识点搞清楚 进入主题之前先来了解一下,项目.解决方案.程序集.命名空 ...

  6. 使用 DocFX 生成 .Net/Unity项目文档

    孙广东  2017.5.27 http://blog.csdn.NET/u010019717 微软开源全新的文档生成工具DocFX   类似JSDoc或Sphinx     如何使用看 : http: ...

  7. 使用Android Studio自带的NDK编译JNI

    /********************************************************************************** * 使用Android Stud ...

  8. Ubuntu中修改Terminal背景

    哈哈哈哈,没什么卵用,只能是看起来舒服,有逼格! 详解参考

  9. [qt][问题记录] 无法定位程序输入点 _ZdaPvj 于动态链接库 libstdc++-6.dll

    无法定位程序输入点 _ZdaPvj 于动态链接库 libstdc++-6.dll 该问题是没有打包库的问题,之所以出现这个问题的是直接用系统自带的命令行使用qt的windeployqt命令导致提供的库 ...

  10. bzoj 2282 消防

    Written with StackEdit. Description 某个国家有\(n\)个城市,这\(n\)个城市中任意两个都连通且有唯一一条路径,每条连通两个城市的道路的长度为\(z_i(z_i ...