1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <title></title>
  5.      <!--添加jquery-->
  6.      <script src="../Script/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>
  7.      <script type="text/javascript">
  8.          $(function () {
  9.              createSelect("addSel");
  10.              addOption("addSel", "first", "第一个数据");
  11.              addOption("addSel", "secord", "第二个数据");
  12.              addOption("addSel", "three", "第三个数据");
  13.              addOption("addSel", "four", "第四个数据");
  14.              addOption("addSel", "fives", "第五个数据");
  15.              removeOneByIndex("addSel", 0);
  16.              removeOneByValue("addSel", "three");
  18.              //****************以验证不可以根据text值取得option元素***********************
  19.              //removeOneByText("addSel", "第三个数据");
  20.              //****************以验证不可以根据text值取得option元素***********************
  22.              //removeAll("addSel");     //删除select元素的所有options
  23.              //removeSelect("addSel");  //删除select元素；
  25.              setDefaultByValue("addSel", "four"); //设置option的默认值
  27.              //添加一个option更改事件 调用自己写的方法
  28.              $("#addSel").change(function () {
  29.                  alert("旧文本：" + getOptionText("addSel") + "     旧Value：" + getOptionValue("addSel"));
  30.                  editOptions("addSel", "新文本", "新Value");  //注意：不传value值的时候  value值默认为text的值
  31.                  alert("新文本：" + getOptionText("addSel") + "     新Value：" + getOptionValue("addSel"));
  32.              })
  33.          })
  35.          //动态创建带id的select
  36.          function createSelect(id) {
  37.              $("body").append("<select id="+id+"></select>");
  38.          }
  40.          //根据select的id 添加选项option
  41.          function addOption(selectID,value,text) {
  42.              //根据id查找select对象，
  43.              var obj = $("#" + selectID + "");
  44.              $("<option></option>").val(value).text(text).appendTo(obj);
  45.          }
  47.          //根据value的值设置options默认选中项
  48.          function setDefaultByValue(selectID,value) {
  49.              var obj = $("#" + selectID + "");
  50.              obj.val(value);
  51.          }
  53.          //获得选中的Option Value；
  54.          function getOptionValue(selectID) {
  55.              //var obj = $("#" + selectID + " option:selected").val();
  56.              //上面和下面两种都可以
  57.              var obj = $("#" + selectID + "").find("option:selected").val();
  58.              return obj;
  59.          }
  61.          //获得选中的option Text;
  62.          function getOptionText(selectID) {
  63.              //var obj = $("#" + selectID + " option:selected").text();
  64.              //上面和下面两种都可以
  65.              var obj = $("#" + selectID + "").find("option:selected").text();
  66.              return obj;
  67.          }
  69.          //修改选中的option
  70.          function editOptions(selectID, newText, newValue) {
  71.              var obj = $("#" + selectID + "").find("option:selected");
  72.              obj.val(newValue).text(newText);
  73.          }
  75.          //根据 index 值删除一个选项option
  76.          function removeOneByIndex(selectID, index) {
  77.              var obj = $("#" + selectID + " option[index=" + index + "]");
  78.              obj.remove();
  79.          }
  81.          //根据 value值删除一个选项option
  82.          function removeOneByValue(selectID, text) {
  83.              var obj = $("#" + selectID + " option[value=" + text + "]");
  84.              obj.remove();
  85.          }
  87.          //****************以验证不可以根据text值取得option元素***********************
  88.          //根据text值删除一个选项option   感觉不可用  真的
  89.          //function removeOneByText(selectID, text) {
  90.          //var obj = $("#" + selectID + " option[text=" + text + "]");
  91.          //obj.remove();
  92.          //}
  93.          //****************以验证不可以根据text值取得option元素***********************
  95.          //删除所有选项option
  96.          function removeAll(selectID) {
  97.              var obj = $("#" + selectID + "");
  98.              obj.empty();
  99.          }
  101.          //删除select
  102.          function removeSelect(selectID){
  103.              var obj = $("#" + selectID + "");
  104.              obj.remove();
  105.          }
  106.      </script>
  107.  </head>
  108.  <body>
  110.  </body>
  111.  </html>

jquery的select元素和option的相关操作的更多相关文章

  1. javaScript的select元素和option的相关操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. select元素添加option的add()方法 | try{}catch{}

    1.javascript中的select元素添加option使用add()方法 select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置 普通浏览器中,第二个参 ...

  3. jQuery获取Select元素

    jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...});   //为Se ...

  4. jquery关于Select元素的操作

    jQuery获取Select元素,并选择的Text和Value: $("#select_id").change(function(){//code...});           ...

  5. jQuery获取select元素选择器练习

    jQuery获取Select选择的Text和Value:语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ...

  6. jQuery获取select中全部option值

    <select id="language"> <option value="">请选择</option> <optio ...

  7. jquery 让select元素中的某个option被选中

    jquery 操作select 取值,设置选中值 博客分类: javaScript selecttextvalue取值设置选中值 比如 <select class="type" ...

  8. pc端美化select，jquery获取select中的option的text值

      代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. Jquery获取select选中的option的文本信息

    注意:以下用的$(this)代表当前选中的select框 第一种: $(this).children("option:selec... ...查看全文

随机推荐

  1. Win32中目录的操作

    1 系统和当前目录 1.1 获取Windows目录 UINT GetWindowsDirectory( LPTSTR lpBuffer, //BUFF的地址  UINT uSize    //BUFF ...

  2. Objective-c知识小结

    1.创建一个类产生.h和.m两个文件,.h中对用到的变量.方法作声明,.m文件中实现,导入时只导入.h文件,如果直接把方法写在.m文件中,未在.h文件中进行声明,则是私有方法  2.@interfac ...

  3. HDOJ 2012 素数判定

    Problem Description 对于表达式n^2+n+41,当n在(x,y)范围内取整数值时(包括x,y)(-39<=x < y<=50),判定该表达式的值是否都为素数. I ...

  4. leetcode https://oj.leetcode.com/problems/jump-game-ii/

    1.超时的,效率太低 public class Solution { public int jump(int[] A) { int len=A.length; int d[]=new int[len] ...

  5. JavaScript之闭包与高阶函数（一）

    JavaScript虽是一门面向对象的编程语言,但同时也有许多函数式编程的特性,如Lambda表达式,闭包,高阶函数等. 函数式编程是种编程范式,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 ...

  6. java 判断是不是检查性异常

    /** * Return whether the given throwable is a checked exception: * that is, neither a RuntimeExcepti ...

  7. poj 1064 Cable master【浮点型二分查找】

    Cable master Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 29554   Accepted: 6247 Des ...

  8. second blog编程之美------控制cpu曲线

    先贴程序: 以前看过这个算法, 不过没什么印象,大概记得它利用while循环来控制cpu利用率 #include int main(int argc,char*argv[]) {         wh ...

  9. HTML5 Security Cheatsheet使用说明

    1.URL: https://html5sec.org/ 2.通过点击如图button(也可点击其他:xss firefox)那行的button可以搜索所有button的Cheatsheet,查看都有 ...

  10. 翻译Android USB HOST API

    翻译Android USB HOST API 源代码地址:http://developer.android.com/guide/topics/connectivity/usb/host.html 译者 ...