Question

我在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" />

我想做的是：

计算正在选择的选项数
将所选选项的数量乘以$ arrear_per_month
在字段输入中显示结果，如上所示（拖欠）

示例：

假设2月，3月和4月被选中。
因此所选项目的数量为3.
然后3 * $ arrear_per_month = 45000.
所以我需要在arrear中显示45000作为值
[已编辑]我需要在没有任何点击的情况下显示它（类似于onChange）

我认为这就是我需要的，请给我一些帮助。

提前谢谢

Answer 1

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

Answer 2

在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>

Answer 3

<强> 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);
});

DEMO

<强>的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))
};

使用<?= $arrear_per_mnth; ?>

的(parseInt(document.getElementById("id_cur_arrear").value || 0))个实例

DEMO

Answer 4

根据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>

警报不起作用，也输入文字。你可以请更正这个剧本

Answer 5

您可以通过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">

这可以通过点击或键盘箭头键选择选项。

Answer 6

谢谢你们所有人。它正在运行。

<?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>

计算组合框中的选定选项

6 个答案:

DEMO

DEMO