在组合框中计数所选选项

Count selected option in combobox

本文关键字：选项 组合      更新时间：2023-09-26

我需要一些javascript PHP方面的帮助来解决我的问题。请看下面的代码：

<?PHP
$arrear_per_month = 15000;
?>
<select name="cur_month" id="id_cur_month" multiple="multiple">
<option value="">Month</option>
<option value="jan">January</option>
<option value="feb">February</option>
<option value="mar">March</option>
<option value="apr">April</option>
<option value="may">May</option>
<option value="jun">June</option>
<option value="jul">July</option>
<option value="aug">August</option>
<option value="sep">September</option>
<option value="oct">october</option>
<option value="nov">November</option>
<option value="dec">december</option>
</select>
Your current arrear: <input id="id_cur_arrear" type="text" name="arrear" value="" readonly="readonly" />

我想做的是：

  1. 计算选择了多少个选项
  2. 将所选选项的数量乘以$arrear_per_month
  3. 在字段输入中显示结果，如上图所示（欠费）

示例：

  1. 假设二月、三月和四月被选中
  2. 因此，所选选项的数量为3
  3. 然后3*$arrear_per_month=45000
  4. 所以我需要显示45000作为拖欠金额
  5. [edited]我需要在不点击的情况下显示它（类似于onChange）

我想这正是我需要的，请给我一些帮助。

提前感谢

var numbersChecked = $('#id_cur_month').find(":selected").length;
$("#id_cur_arrear").val(numbersChecked * <?= $arrear_per_mnth; ?>);

您可以通过jQuery（使用更少的代码）轻松完成此操作。然而，如果你正在专门寻找JavaScript代码，你可以试试这个-

<script type="text/javascript">
 function update(){
    var apm = Number("<?php echo $arrear_per_month;?>");
    var cm = document.getElementById("id_cur_month").selectedOptions.length;
    var sel_cnt = (apm * cm);
    document.getElementById("id_cur_arrear").value = sel_cnt;
 }
</script>

将onchange事件添加到您的select框-

<select name="cur_month" id="id_cur_month" onchange="update()" multiple="multiple">

通过单击或键盘箭头键选择选项都可以。

在javascript中，就是这样做的

var sel = document.getElementById('id_cur_month');
alert(sel.selectedOptions.length);

上面的代码应提醒所选选项的数量。

但是，您确实需要进行一些额外的编码，因为您无法将javascript变量传递给php代码。

您可以将php变量声明为javascript变量。

<script>
var arrear_per_month = <?php echo $arrear_per_month ?>;
var sel = document.getElementById('id_cur_month');
var total = arrear_permonth * sel.selectedOptions.length;
alert(total);
</script>

根据Andrex的建议，我尝试过这样修改脚本，但没有成功。

<?PHP
$arrear_per_month = 15000;
?>
<script type="text/javascript" language="javascript">
var sel = document.getElementById('id_cur_month');
alert(sel.selectedOptions.length);
var arrear_per_month = <?php echo $arrear_per_month ?>;
var sel = document.getElementById('id_cur_month');
var total = arrear_permonth * sel.selectedOptions.length;
alert(total);
document.chk_arrear.arrear.value = total;
</script>
<form name="chk_arrear">
<select name="cur_month" id="id_cur_month" multiple="multiple">
<option value="">Month</option>
<option value="jan">January</option>
<option value="feb">February</option>
<option value="mar">March</option>
<option value="apr">April</option>
<option value="may">May</option>
<option value="jun">June</option>
<option value="jul">July</option>
<option value="aug">August</option>
<option value="sep">September</option>
<option value="oct">october</option>
<option value="nov">November</option>
<option value="dec">december</option>
</select>
Your current arrear: <input type="text" name="arrear" value="" readonly="readonly" />
</form>

警报和输入文本都不起作用。你能纠正这个脚本吗？

JQuery

$("#id_cur_month").click(function () {
    var len = 0;
    $("#id_cur_month").children(":selected").each(function () {
        len += ($(this).val() ? 1 : 0);
    });
    var res = len * (parseInt($("#id_cur_arrear").val() || 0));
    $("#id_cur_arrear_res").val(res);
});

演示

Javascript

var select = document.getElementById("id_cur_month");
console.log(select);
select.onclick = function () {
    var opts = select.options;
    var len = 0;
    for (i = 0; i < opts.length; i++) {
        if (opts[i].selected && opts[i].value) len++;
    }
    document.getElementById("id_cur_arrear_res").value = len * (parseInt(document.getElementById("id_cur_arrear").value || 0))
};

使用(parseInt(document.getElementById("id_cur_arrear").value || 0)) 的<?= $arrear_per_mnth; ?>实例

演示

感谢大家。它正在运行。

<?PHP
$arrear_per_month = 15000;
?>
<script type="text/javascript" language="javascript">
function update(){
var apm = Number("<?php echo $arrear_per_month;?>");
var cm = document.getElementById("id_cur_month").selectedOptions.length;
var sel_cnt = (apm * cm);
document.getElementById("id_cur_arrear").value = sel_cnt;
}
</script>
<form name="chk_arrear">
<select name="cur_month" id="id_cur_month" multiple="multiple" onchange="update()">
<option value="">Month</option>
<option value="jan">January</option>
<option value="feb">February</option>
<option value="mar">March</option>
<option value="apr">April</option>
<option value="may">May</option>
<option value="jun">June</option>
<option value="jul">July</option>
<option value="aug">August</option>
<option value="sep">September</option>
<option value="oct">october</option>
<option value="nov">November</option>
<option value="dec">december</option>
</select>
Your current arrear: <input type="text" id="id_cur_arrear" name="arrear" readonly="readonly" />
</form>
相关文章：