javascript - How to get the values of multiple select box and display the result in textbox? -
i have dropdown list of items,each item holding each price. once selecting items,its total price populated in textbox. dropdown-
<select name="treatment[]" class="col-sm-12 country" id="" multiple="multiple"> <option value="">--select--</option> <?php foreach($treatment $treatments) { ?> <option value="<?php echo $treatments->treatment_name ?>"><?php echo $treatments->treatment_name ?></option> <?php }?> </select>
i trying using ajax,but lost.anyone can me out?thanks in advance.
each item holding each price
if price
stored item
in same table, need add data attributes
option
additional data. if not better joined it
in codeigniter controller or model link price items. here example can show :
supposed have html structure :
<select name="treatment[]" class="col-sm-12 country" id="" multiple="multiple"> // line of code loop php // see data-price attribute store price inside // later can referencing attribute <option value="fish" data-price="200">fish</option> <option value="chicken" data-price="500">chicken</option> </select> // place display total <input type="text" id="total" />
and here jquery code sum selected items :
$('.country').click(function () { var price = 0; $('option:selected', $(this)).each(function () { //console.log($(this).data('price')); // sum price selected items price += $(this).data('price'); }); $('#total').val(price); });
updated
if using inline javascript onchange
, need send reference function want call :
in html part change : onchange="update_price(this)"
, , js follow :
function update_price(e) { // ^ add //$('#treatment').on('change',function () { comment var price = 0; $('option:selected', $(e)).each(function() { // ^ add console.log($(this).data('pricetag')); // sum price selected items price += $(this).data('pricetag'); }); $('#total').val(price); //}); comment }
Comments
Post a Comment