Jquery—JQuery对select的操作(01)

来源:互联网 发布:柴火大院十月稻田知乎 编辑:程序博客网 时间:2024/05/22 16:04

        JQuery对select的操作是多方面的,不能穷尽的,在这里先总结一下工作过程中用到的一些操作,以后再遇到其它的关于JQuery对select的操作再做总结:

       1、禁用select标签:

             <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
             <html>
                         <head>
                                     <title>JQuery对select的操作——禁用select标签</title>
                                     <meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
                                     <script type="text/javascript" src="./jquery-1.6.2.js"></script>
                         </head>
                         <body>
                                     <select id="flowerId" name="flowerName">
                                                   <option value="0">请选择</option> <option value="1" selected="selected">海棠花</option> <option value="2">梨花</option>
                                     </select>
                                     <script type="text/javascript">
                                                 $("#flowerId").attr("disabled","disabled");
                                     </script>
                        </body>
               </html>

        2、选中特定option选项:

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
              <html>
                          <head>
                                       <title>JQuery对select的操作——选中特定option选项</title>
                                       <meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
                                       <script type="text/javascript" src="./jquery-1.6.2.js"></script>
                         </head>
                         <body>
                                       <select id="flowerId" name="flowerName">
                                                     <option value="0">请选择</option> <option value="1">海棠花</option> <option value="2">梨花</option>
                                       </select>
                                       <script type="text/javascript">
                                                      $("#flowerId ").val(1);
                                       </script>
                         </body>
              </html>

        3、获取选中option的value值:

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
              <html>
                           <head>
                                      <title>JQuery对select的操作——获取选中option的value值</title>
                                      <meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
                                      <script type="text/javascript" src="./jquery-1.6.2.js"></script>
                           </head>
                           <body>
                                      <select id="flowerId" name="flowerName">
                                                     <option value="0">请选择</option> <option value="1">海棠花</option> <option value="2">梨花</option>
                                      </select>
                                      <input type="button" value="获取值" onclick="javascript:getValue();">
                                      <script type="text/javascript">
                                                     function getValue(){
                                                             alert($("#flowerId").val());
                                                     }
                                      </script>
                            </body>
                </html>

        【以上Demo0分下载

0 0