如何获取多个选择框的值并在文本框中显示结果？

Question

我有一个包含项目列表的下拉列表，每个项目都包含每个价格。选择项目后，将在文本框中填充其总价。这是我的下拉菜单-

   <select name="treatment[]" class="col-sm-12 country" id="" multiple="multiple">    
       <option value="">--Select--</option>
       <?php foreach($treatment as $treatments) { ?>
         <option value="<?php echo $treatments->treatment_name ?>"><?php echo $treatments->treatment_name ?></option>
       <?php }?>                      
   </select>

我正在尝试使用 ajax，但我迷路了。任何人都可以帮助我吗？提前谢谢。

Answer 1

每个项目持有每个价格

如果price 与item 一起存储在同一个表中，您只需将data attributes 添加到option 中即可获得更多数据。如果不是更好 Joined it 在您的 codeigniter 控制器或模型中将所有价格与项目链接在一起。这是我可以向您展示的示例：

假设你有这样的 HTML 结构：

<select name="treatment[]" class="col-sm-12 country" id="" multiple="multiple">
 // this line of code loop by php
 // see data-price attribute store Price inside
 // later we can referencing this attribute
 <option value="fish" data-price="200">Fish</option>
 <option value="chicken" data-price="500">Chicken</option>
</select>
// place to display total
<input type="text" id="total" /> 

这里 jQuery 代码用于总结所有选定的项目：

$('.country').click(function () {
  var price = 0;
   $('option:selected', $(this)).each(function () {
     //console.log($(this).data('price'));
     // sum price for selected items
     price += $(this).data('price');
  });
  $('#total').val(price);
});

DEMO

更新

如果您使用像onchange 这样的内联javascript，那么您需要将它的引用发送到您要调用的函数中，如下所示：

在 HTML 部分改为：onchange="update_price(this)"，JS 如下：

function update_price(e) {
                   // ^ add this
 //$('#treatment').on('change',function () { comment this

  var price = 0;                          
  $('option:selected', $(e)).each(function() {
                      // ^ add this
    console.log($(this).data('pricetag'));
    // sum price for selected items
    price += $(this).data('pricetag');

  });
  $('#total').val(price);
//}); comment this
}

Answer 2

好的，据我所知，您的治疗是有价格的，您想在选择时将其添加到文本框中。你有两个选择这样做真的

1) 您将价格信息添加到选项中

<option 
    value="<?= $treatment->name ?>" 
    data-pricetag="<?= $treatment->priceinfo ?>"
>
..
</option>

然后使用 jquery 在选择更改时填充一些文本字段

$('select').on('change',function(){
    var text = $( "select option:selected" ).data('pricetag');
    $('#textfield').text(text);
}

2) 您在 select 上向服务器请求价格信息

 <option 
        value="<?= $treatment->id ?>" 
 >
    ..
 </option>

然后用 jquery 询问信息

$('select').on('change',function(){
   var id = $(this).val();
   $.post('pricedata.php',{id:id},function(data){
       $('#textfield').text(data);
   });
}

其中 pricedata.php 使用 $_POST['id'] 来查询正确的定价信息，并以字符串形式返回。

Answer 3

您必须结合 javascript 来执行此操作。 PHP 用javascript 生成一个数组， 值必须是产品ID 等，用javascript 运行选中的项目并使用数组添加它们。然后服务器发送产品的 id 并做同样的事情，如果你想创建一个购物车。

如果你想Ajax，你必须和上一段一样，但是将项目发送到一个url，然后返回sum，然后将Ajax的结果放入你想要的项目中。对于初学者来说，第一个选项可能更容易。

Answer 4

Norlihazmey Ghazali- 下面是我修改后的脚本代码，我注意到的问题是即使我们选择了一个脚本不起作用的项目，我只是尝试通过在里面发出警报但它没有显示。

$('select #treatment option').click(function () {
		 alert('Hello');
  var price = 0;
  
   $('select #treatment option:selected', $(this)).each(function () {
     console.log($(this).data('price'));
     // sum price for selected items
     price += $(this).data('price');
	 alert(price);
  });
  $('#total').val(price);
});

<div class="col-sm-9">
                     <select name="treatment[]" class="col-sm-12 country" id="treatment" multiple="multiple">
                   
                     <option value="">--Select--</option>
                        
                        <?php foreach($treatment as $treatments) { ?>
                       <option value="<?php echo $treatments->treatment_id ?>" data-price="<?= $treatments->treatment_price?>"><?php echo $treatments->treatment_name ?></option>
                       <?php }?>
                      
					  
                     </select>
                 </div>

<div class="col-sm-9">
					
 <input type="text" name="price" id="total" class="form-control" placeholder=""/>
					
</div>