jquery的select元素和option的相关操作

时间：2023-01-15 23:23:38
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title></title>
     <!--添加jquery-->
     <script src="../Script/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(function () {
             createSelect("addSel");
             addOption("addSel", "first", "第一个数据");
             addOption("addSel", "secord", "第二个数据");
             addOption("addSel", "three", "第三个数据");
             addOption("addSel", "four", "第四个数据");
             addOption("addSel", "fives", "第五个数据");
             removeOneByIndex("addSel", 0);
             removeOneByValue("addSel", "three");

             //****************以验证不可以根据text值取得option元素***********************
             //removeOneByText("addSel", "第三个数据");
             //****************以验证不可以根据text值取得option元素***********************

             //removeAll("addSel");     //删除select元素的所有options
             //removeSelect("addSel");  //删除select元素；

             setDefaultByValue("addSel", "four"); //设置option的默认值

             //添加一个option更改事件 调用自己写的方法
             $("#addSel").change(function () {
                 alert("旧文本：" + getOptionText("addSel") + "     旧Value：" + getOptionValue("addSel"));
                 editOptions("addSel", "新文本", "新Value");  //注意：不传value值的时候  value值默认为text的值
                 alert("新文本：" + getOptionText("addSel") + "     新Value：" + getOptionValue("addSel"));
             })
         })

         //动态创建带id的select
         function createSelect(id) {
             $("body").append("<select id="+id+"></select>");
         }

         //根据select的id 添加选项option
         function addOption(selectID,value,text) {
             //根据id查找select对象，
             var obj = $("#" + selectID + "");
             $("<option></option>").val(value).text(text).appendTo(obj);
         }

         //根据value的值设置options默认选中项
         function setDefaultByValue(selectID,value) {
             var obj = $("#" + selectID + "");
             obj.val(value);
         }

         //获得选中的Option Value；
         function getOptionValue(selectID) {
             //var obj = $("#" + selectID + " option:selected").val();
             //上面和下面两种都可以
             var obj = $("#" + selectID + "").find("option:selected").val();
             return obj;
         }

         //获得选中的option Text;
         function getOptionText(selectID) {
             //var obj = $("#" + selectID + " option:selected").text();
             //上面和下面两种都可以
             var obj = $("#" + selectID + "").find("option:selected").text();
             return obj;
         }

         //修改选中的option
         function editOptions(selectID, newText, newValue) {
             var obj = $("#" + selectID + "").find("option:selected");
             obj.val(newValue).text(newText);
         }

         //根据 index 值删除一个选项option
         function removeOneByIndex(selectID, index) {
             var obj = $("#" + selectID + " option[index=" + index + "]");
             obj.remove();
         }

         //根据 value值删除一个选项option
         function removeOneByValue(selectID, text) {
             var obj = $("#" + selectID + " option[value=" + text + "]");
             obj.remove();
         }

         //****************以验证不可以根据text值取得option元素***********************
         //根据text值删除一个选项option   感觉不可用  真的
         //function removeOneByText(selectID, text) {
         //var obj = $("#" + selectID + " option[text=" + text + "]");
         //obj.remove();
         //}
         //****************以验证不可以根据text值取得option元素***********************

         //删除所有选项option
         function removeAll(selectID) {
             var obj = $("#" + selectID + "");
             obj.empty();
         }

         //删除select
         function removeSelect(selectID){
             var obj = $("#" + selectID + "");
             obj.remove();
         }
     </script>
 </head>
 <body>

 </body>
 </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&lpar;&rpar;方法 &vert; try&lbrace;&rcub;catch&lbrace;&rcub;

    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&quot ...

  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. SOA的浅析

    曾今SOA的概念犹如今日“云计算.大数据”一样,被炒得火热,不少企业便纷纷响应,并宣称会拥抱和实施SOA.而事实上,业界出现了两种极端:一种是由于各类文章和书籍关于SOA的描述往往太过抽象,再加上各大 ...

  2. Gradle与Gatling脚本集成

    Gatling作为次时代的性能测试工具,由于其API简洁明了.性能出众,越来越受欢迎.但是运行Gatling脚本却有诸多不便,其提供的默认方式不是很方便.考虑到Gatling脚本本质上是Scala类, ...

  3. js中event的target和currentTarget的区别

    js中的event对象包含很多有用的信息 target:触发事件的元素. currentTarget:事件绑定的元素. 两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了,例如: ...

  4. HTTP接口功能自动化测试入门

    无论是浏览器上运行的Web应用还是移动端的H5应用,都离不开HTTP接口.Web应用通常是分为前后台开发的,后台提供接口调用返回Json对象,前台使用JS框架去加载后台返回的Json.而H5页面动态获 ...

  5. RHEL7服务管理

    对于学习过红帽RHEL6的系统或已经习惯使用service.chkconfig等命令来管理系统服务的用户可能要郁闷了, 因为在红帽RHEL7系统中管理服务的命令变成了“systemctl”,但使用方法 ...

  6. js 中对象属性特性的描述

    如何自定义属性的特性? 用对象.属性的特性和自定义的属性的特性有什么区别? 它的四大特性 writable   enumerable   configable   有什么区别? 先预习一个用对象.属性 ...

  7. python generator&lpar;生成器&rpar;

    a=(x*2 for x in range(1000)) # print(a.next())#python2使用 print(a.__next__()) #python3使用 print(next(a ...

  8. Java 类文件结构

    Java 诞生之时有句著名的宣传口号"Write Once, Run Anywhere.".但是,Java 语言本身不具备跨平台的能力,而是 JVM 提供了跨平台的能力. 事实上, ...

  9. java把结果集序列化成json通过out流传给前台步骤

    1.把处理好的list或map序列化成JSON字符 /** * 序列化集合成JSON字符 * @param list * @return */ public static String structu ...

  10. laravel CSRF 保护

    在开始之前让我们来实现上述表单访问伪造的完整示例,为简单起见,我们在路由闭包中实现所有业务代码: Route::get('task/{id}/delete', function ($id) { ret ...

相关文章