html combo box or select box for multiple selection

10,502

For multi-select combo-box, you can use multiple attribute.

<select name="items" multiple>
<option value="">SELECT</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>

Then based on your first screen-shot, to add items from one combo to another you should use some JavaScript.Below is the full html code.

<!DOCTYPE html>
<html>
<head>
    <title>List</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <style>
        select, input[type="text"] {
           width: 160px;
           box-sizing: border-box;
        }
        section {
           padding: 8px;
           background-color: #f0f0f0;
           overflow: auto;
        }
        section > div {
          float: left;
          padding: 4px;
        }
        section > div + div {
          width: 40px;
          text-align: center;
        }
        fieldset {
            padding:10px;margin-top:10px;
        }
    </style>
</head>
<body>

<section class="container">
    <div>
        <select id="leftValues" size="5" multiple>
             <option>1</option>
             <option>2</option>
             <option>3</option>
        </select>
        <!--div>
            <input type="text" id="txtLeft" />
        </div-->
    </div>
    <div>
        <input type="button" id="btnRight" value="&gt;&gt;" />
        <input type="button" id="btnLeft" value="&lt;&lt;" />
    </div>
    <div>
        <select id="rightValues" size="4" multiple>

        </select>
        <!--div>
            <input type="text" id="txtRight" />
        </div-->
    </div>
</section>


<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Descriptive Options</h4>
      </div>
      <div class="modal-body">
        <!-- Your content here -->
        <input type="checkbox" name="mean" checked> Mean
        <input type="checkbox" name="sum"> Sum
        <fieldset style="padding:10px;margin-top:10px;">
            <legend>Description</legend>
            <input type="checkbox" checked> Std. Deviation
            <input type="checkbox"> Minimum
        </fieldset>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Continue</button>
        <button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-success">Help</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>

    $("#btnLeft").click(function () {
        var selectedItem = $("#rightValues option:selected");
        $("#leftValues").append(selectedItem);
    });

    $("#btnRight").click(function () {
        var selectedItem = $("#leftValues option:selected");
        $("#rightValues").append(selectedItem);
    });

    $("#rightValues").change(function () {
        //var selectedItem = $("#rightValues option:selected");
        //$("#txtRight").val(selectedItem.text());
    });
    $("#leftValues").change(function () {
        //var selectedItem = $("#leftValues option:selected");
        //$("#txtLeft").val(selectedItem.text());
        $('#myModal').modal('show');

    });
</script>
</body>
</html>

Demo

Share:
10,502

Related videos on Youtube

user2739848
Author by

user2739848

Updated on June 04, 2022

Comments

  • user2739848
    user2739848 almost 2 years

    enter image description hereI am just wondering what's the name of the below form? I was Googling from morning for the list of HTML forms but I couldn't find this kind of form anywhere. Can anyone tell me the exact name of this form and is this available in HTML forms?

    I just want to add this kind of form in my website. Is that available for HTML or should I use JavaScript or its only limited for Windows applications? can someone help me please

  • user2739848
    user2739848 over 10 years
    i devo i have added the code i used in above can you please help me thanks
  • user2739848
    user2739848 over 10 years
    i have used as follows jsfiddle.net/eUDRV/3 but i need to be placed them in opposite way that is combo box multi select on left side and the selected values in right side now am getting in opposite way can you help me please.
  • Anshad Vattapoyil
    Anshad Vattapoyil over 10 years
    Check my updated answer.It's for simple use, you can add more conditions in the JavaScript.
  • user2739848
    user2739848 over 10 years
    thanks a lot and as you have seen the image when they click on option after selecting it has to show another div with checkboxes to select. is it possible.
  • Anshad Vattapoyil
    Anshad Vattapoyil over 10 years
    This can be done using bootstrap model or jquery-ui. Please check my updated answer using twitter bootstrap. Here is the bootstrap model documentation. getbootstrap.com/javascript/#modals