JQuery with HTML SELECT element

From CoderLearner
Jump to: navigation, search

HTML Select Element

This is a list of HTML select element.

<form name="frm1">
    <select id='ilist' name="nlist">
        <option value='1'>Option A</option>
        <option value='2'>Option B</option>
        <option value='3'>Option C</option>
        <option value="4">Option D</option>
        <option value="5">Option E</option>
        <option value="6">Option F</option>
        <option value="7">Option G</option>
    </select>
</form>

How to select the option value

Example 1

Use ID attribute to select selected option.

            $(document).ready(function(){
                $('select#ilist').change(function(){
                    var sel_value = $('select[name="nlist"] option:selected').val();
                    $('span').html('option: '+sel_value);
                });
            });

Try It

Example 2

  • option 1: value:1 text:Option A.
  • This will get the option value and its text.
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Select Drop Down</title>
        <script 
            type="text/javascript" 
            src="/lib/jquery-1.7.2.min.js">				 
        </script>

        <script>
            $(document).ready(function() {
                $('#checkboxcheck').click(function(){
					
                    var sel_value = $('select[name="nlist"] option:selected').val();
                    var sel_tx  =   $('select[name="nlist"] option:selected').text();
                    $('#content').html('value:'+sel_value + ' text:'+sel_tx);
                });
            });
        </script>
    </head>
    <body>
        <div id="content"></div>
        <select id='ilist' name="nlist">
            <option value='1'>Option A</option>
            <option value='2'>Option B</option>
            <option value='3'>Option C</option>
            <option value="4">Option D</option>
            <option value="5">Option E</option>
            <option value="6">Option F</option>
            <option value="7">Option G</option>
        </select>
        <button id="checkboxcheck">Check It</button>
    </body>
</html>

Try It

Example 3

  • Get all multiple select option
  • Save the user select option to the selected_op array
  • Join the array and display
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Select Drop Down</title>
        <script 
            type="text/javascript" 
            src="/lib/jquery-1.7.2.min.js">				 
        </script>

        <script>
            $(document).ready(function() {
                $('#checkboxcheck').click(function(){
                    var selected_op = [];
                    $('select[name="nlist"] option:selected').each(function() {
                        selected_op.push('Text: '+$(this).text() 
                          + ' Value: ' + $(this).val());
                    });
                    var all_fruits= selected_op.join(',');
                    $('#content').html(all_fruits);
                });
            });
        </script>
    </head>
    <body>
        <div id="content"></div>
        <select id='ilist' name="nlist" multiple="multiple">
            <option value='1'>Option A</option>
            <option value='2'>Option B</option>
            <option value='3'>Option C</option>
            <option value="4">Option D</option>
            <option value="5">Option E</option>
            <option value="6">Option F</option>
            <option value="7">Option G</option>
        </select>
        <button id="checkboxcheck">Check It</button>
    </body>
</html>

Try It

Getting the text of multiple selected option

  var myopt = [];
  $('#ilist :selected').each(function(i, selected) {
      myopt[i] = $(selected).text();
  });

Getting the value of multiple selected option

 var myopt = [];
  $('#ilist :selected').each(function(i, selected) {
      myopt[i] = $(selected).val();
  });