Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Save the selected item of a dropdown

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 160
    Comment on it

    If we want to save the selected item of a dropdown, we can save it by simply using Selectmenu widgets.

    Below is the simple example of Selectmenu widgets:-

    HTML-

    <body>
     
    <div class="example">
     
    <form action="#">
     
      <fieldset>
        <label for="speed">Select a speed</label>
        <select name="speed" id="speed">
          <option>Slower</option>
          <option>Slow</option>
          <option selected="selected">Medium</option>
          <option>Fast</option>
          <option>Faster</option>
        </select>
     
        <label for="files">Select a file</label>
        <select name="files" id="files">
          <optgroup label="Scripts">
            <option value="jquery">jQuery.js</option>
            <option value="jqueryui">ui.jQuery.js</option>
          </optgroup>
          <optgroup label="Other files">
            <option value="somefile">Some unknown file</option>
            <option value="someotherfile">Some other file with a very long option text</option>
          </optgroup>
        </select>
     
        <label for="number">Select a number</label>
        <select name="number" id="number">
          <option>1</option>
          <option selected="selected">2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
          <option>9</option>
          <option>10</option>
         
        </select>
      </fieldset>
     
    </form>
     
    </div>
     
     
    </body>

     

    CSS-

    <style>
        fieldset {
          border: 0;
        }
        label {
          display: block;
          margin: 30px 0 0 0;
        }
        select {
          width: 200px;
        }
        .overflow {
          height: 200px;
        }
      </style>

     

    JAVASCRIPT-

    <script>
      $(function() {
        $( "#speed" ).selectmenu();
     
        $( "#files" ).selectmenu();
     
        $( "#number" )
          .selectmenu()
          .selectmenu( "menuWidget" )
            .addClass( "overflow" );
      });
      </script>

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: