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=">>" />
<input type="button" id="btnLeft" value="<<" />
</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">×</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>
Related videos on Youtube
Author by
user2739848
Updated on June 04, 2022Comments
-
user2739848 almost 2 years
I 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 over 10 yearsi devo i have added the code i used in above can you please help me thanks
-
user2739848 over 10 yearsi 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 over 10 yearsCheck my updated answer.It's for simple use, you can add more conditions in the JavaScript.
-
user2739848 over 10 yearsthanks 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 over 10 yearsThis 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