JavaScript DHTML/jQuery/Form Select

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

Get all selected items from form select control

    
<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>
      <div></div>
    </body>
</html>



Get multiple selected value

    
<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>
      <p></p>
      <select id="single" multiple="multiple">
        <option>Single</option>
        <option>Single2</option>
        <option>Single3</option>
      </select>
  </body>
</html>



Get selected items from form select control

    
<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>
    <div></div>
  </body>
</html>



Get selected value from select

    
<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>
      <p></p>
      <select id="single">
        <option>Single</option>
        <option>Single2</option>
      </select>
  </body>
</html>



Select multiple select option

 
<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><br/>
        
          <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>



Select single select option

 
<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><br/>
        
          <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>



Set select option

    
<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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/Form_Select&oldid=2873»