<!DOCTYPE html>
<html>
<title>How to show multiple select box value in a input box jQuery</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<select name="treatment[]" class="col-sm-12 select-item" multiple="multiple">
<option value="fish" data-price="200">Biriyani</option>
<option value="chicken" data-price="110">Chicken</option>
<option value="chicken" data-price="120">Paneer</option>
</select>
<input type="text" id="total" />
<script>
$('.select-item').click(function() {
var price = 0;
$('option:selected', $(this)).each(function() {
console.log($(this).data('price'));
price += $(this).data('price');
});
$('#total').val(price);
});
</script>
</body>
</html>
