Menu
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
219
asked Nov 30 '25 14:11
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>
Demo
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
