JavaScript Tutorial/jQuery/Form Select

Материал из Web эксперт
Перейти к: навигация, поиск

30. Get all selected items from form select control

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
            $("select").change(function () {
               var str = "";
               $("select option:selected").each(function () {
                   str += $(this).text() + " ";
               });
               $("div").text(str);
            }).change();
       });
   </script>
 </head>
 <body>
   <body>
     <select name="sweets" multiple="multiple">
       <option>A</option>
       <option>B</option>
       <option selected="selected">C</option>
       <option>D</option>
       <option>E</option>
     </select>
   </body>

</html></source>


30. Get multiple selected value

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
          function displayVals() {
             var singleValues = $("#single").val();
             $("p").html(singleValues.join(","));
          }
          $("select").change(displayVals);
       });
   </script>
 </head>
 <body>
   <body>

     <select id="single" multiple="multiple">
       <option>Single</option>
       <option>Single2</option>
       <option>Single3</option>
     </select>
 </body>

</html></source>


30. Get selected items from form select control

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
     
           $("select").change(function () {
              var str = "";
              $("select option:selected").each(function () {
                 str += $(this).text() + " ";
             });
             $("div").text(str);
           }).trigger("change");
       });
   </script>
 </head>
 <body>
   <select name="A" multiple="multiple">
       <option>A</option>
       <option selected="selected">B</option>
       <option>C</option>
   </select>
 </body>

</html></source>


30. Get selected value from select

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
          function displayVals() {
             var singleValues = $("#single").val();
             $("p").html(singleValues);
          }
          $("select").change(displayVals);
       });
   </script>
 </head>
 <body>
   <body>

     <select id="single">
       <option>Single</option>
       <option>Single2</option>
     </select>
 </body>

</html></source>


30. Select multiple select option

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               $("#single").val("Single2");
               $("#multiple").val(["Multiple2", "Multiple3"]);
               $("input").val(["check1","check2", "radio1" ]);
       });
   </script>
   <style>
     .selected { color:red; }
     .highlight { background:yellow; }
   </style>    
 </head>
 <body>
   <body>
         <select id="single">
           <option>1</option>
           <option>2</option>
         </select>
         <select id="multiple" multiple="multiple">
           <option selected="selected">Multiple</option>
           <option>Multiple2</option>
           <option selected="selected">Multiple3</option>
         </select>
<input type="checkbox" name="checkboxname" value="check1"/> check1 <input type="checkbox" name="checkboxname" value="check2"/> check2 <input type="radio" name="r" value="radio1"/> radio1 <input type="radio" name="r" value="radio2"/> radio2 </body>

</html></source>


30. Select single select option

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               $("#single").val("Single2");
               $("#multiple").val(["Multiple2", "Multiple3"]);
               $("input").val(["check1","check2", "radio1" ]);
       });
   </script>
   <style>
     .selected { color:red; }
     .highlight { background:yellow; }
   </style>    
 </head>
 <body>
   <body>
         <select id="single">
           <option>1</option>
           <option>2</option>
         </select>
         <select id="multiple" multiple="multiple">
           <option selected="selected">Multiple</option>
           <option>Multiple2</option>
           <option selected="selected">Multiple3</option>
         </select>
<input type="checkbox" name="checkboxname" value="check1"/> check1 <input type="checkbox" name="checkboxname" value="check2"/> check2 <input type="radio" name="r" value="radio1"/> radio1 <input type="radio" name="r" value="radio2"/> radio2 </body>

</html></source>


30. Set select option

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
          $("#single").val("Single2");
    
       });
   </script>
 </head>
 <body>
   <body>
      <select id="single">
           <option>Single</option>
           <option>Single2</option>
      </select>
 </body>

</html></source>