时间戳

首页 > 解决方案 > 使用 JS 获取值拆分值并将其显示在输入中

javascript - 使用 JS 获取值拆分值并将其显示在输入中

问题描述

我需要从选择中获取一个值，然后添加这些值并在输入框中显示总计。只要我不使用拆分，它就可以工作，但我需要拆分，因为我需要值中有 2 个不同的值。我知道错误在我的分裂中，但就是想不通。任何帮助都会很棒！

就像我说的那样，如果我取出拆分并仅在选择值中使用数字，则脚本效果很好，但我需要选择值中的 2 个不同值并将其拆分并从该拆分中获取第二个数字。示例 1-15 我需要将 15 添加到其他的。

<div class="row">
<div class="col-12 col-sm-12">
    <div class="card h-100">
        <div class="card-header">Select 4 Products</div>
        <div class="card-body" style="padding: 20px 30px 15px 30px;">
        <p style="font-size:18px; text-align:center; font-weight:bold;">BV Needed For Platinum Package: 75</p>
            <p style="font-size:20px; color:red; text-align:center; font-weight:bold;">Current BV:  <input type="text" name="bv" id="bv" value="0" readonly></p>
            <br />
            <div class="row text-center">
                <div class="col-3 text-center">
                    <select name="product1" class="form-control" id="p1" onchange="updateDue()">
                        <option value="" >Please Select A Product</option>                                    
                        <option value="1|15">Product 1</option>
                        <option value="2|13">Product 2</option>
                        <option value="3|9">Product 3</option>
                        <option value="4|8">Product 4</option>
                        <option value="5|13">Product 5</option>
                        <option value="6|13">Product 6</option>
                    </select>
                </div>

                <div class="col-3 text-center">
                    <select name="product1" class="form-control" id="p2" onchange="updateDue()">
                        <option value="" >Please Select A Product</option>                                    
                        <option value="1|15">Product 1</option>
                        <option value="2|13">Product 2</option>
                        <option value="3|9">Product 3</option>
                        <option value="4|8">Product 4</option>
                        <option value="5|13">Product 5</option>
                        <option value="6|13">Product 6</option>
                    </select>
                </div>

                <div class="col-3 text-center">
                    <select name="product1" class="form-control" id="p3" onchange="updateDue()">
                        <option value="" >Please Select A Product</option>                                    
                        <option value="1|15">Product 1</option>
                        <option value="2|13">Product 2</option>
                        <option value="3|9">Product 3</option>
                        <option value="4|8">Product 4</option>
                        <option value="5|13">Product 5</option>
                        <option value="6|13">Product 6</option>
                    </select>
                </div>

                <div class="col-3 text-center">
                    <select name="product1" class="form-control" id="p4" onchange="updateDue()">
                        <option value="" >Please Select A Product</option>                                    
                        <option value="1|15">Product 1</option>
                        <option value="2|13">Product 2</option>
                        <option value="3|9">Product 3</option>
                        <option value="4|8">Product 4</option>
                        <option value="5|13">Product 5</option>
                        <option value="6|13">Product 6</option>
                    </select>
                </div>


            </div>
        </div>
    </div>
</div>

<script type="text/javascript">//<![CDATA[
function updateDue() {
var val1 = parseInt(document.getElementById("p1").value);
var val2 = parseInt(document.getElementById("p2").value);
var val3 = parseInt(document.getElementById("p3").value);
var val4 = parseInt(document.getElementById("p4").value);

var realbv1 = val1.split('|');
var realbv2 = val2.split('|');
var realbv3 = val3.split('|');
var realbv4 = val4.split('|');

if (!realbv1[1]) { val1 = 0; } else { val1 = realbv1[1]; }
if (!realbv2[1]) { val1 = 0; } else { val2 = realbv2[1]; }
if (!realbv3[1]) { val1 = 0; } else { val3 = realbv3[1]; }
if (!realbv4[1]) { val1 = 0; } else { val4 = realbv4[1]; }

var ansD = document.getElementById("bv");
ansD.value = val1 + val2 + val3 + val4;
}
//]]></script>

对此的任何帮助都会很棒。我一直在喋喋不休的唯一原因是因为这个表格让我添加了更多细节，但我已经添加了所有细节。它一直说我的帖子主要是代码，这太疯狂了，我可以在其中添加多少细节以使其消失。因此，如果您仍在阅读本文，我很抱歉，这只是为了消除那个愚蠢的错误。他们应该真正解决这个问题，因为并非所有问题都需要一本详细的书。

标签： javascript

解决方案

您的问题出在这几行...：

var val1 = parseInt(document.getElementById("p1").value);

如果内容为“1|15”，则结果将为 1，因此第二个数字消失了。

将该行更改为：

var val1 = document.getElementById("p1").value;

为了得到总和，您只需在每个附录前面添加一个加号：

ansD.value = +val1 + +val2 + +val3 + +val4;

片段：

function updateDue() {
    var val1 = document.getElementById("p1").value;
    var val2 = document.getElementById("p2").value;
    var val3 = document.getElementById("p3").value;
    var val4 = document.getElementById("p4").value;

    var realbv1 = val1.split('|');
    var realbv2 = val2.split('|');
    var realbv3 = val3.split('|');
    var realbv4 = val4.split('|');

    if (!realbv1[1]) { val1 = 0; } else { val1 = realbv1[1]; }
    if (!realbv2[1]) { val1 = 0; } else { val2 = realbv2[1]; }
    if (!realbv3[1]) { val1 = 0; } else { val3 = realbv3[1]; }
    if (!realbv4[1]) { val1 = 0; } else { val4 = realbv4[1]; }

    var ansD = document.getElementById("bv");
    ansD.value = +val1 + +val2 + +val3 + +val4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>

<div class="row">
    <div class="col-12 col-sm-12">
        <div class="card h-100">
            <div class="card-header">Select 4 Products</div>
            <div class="card-body" style="padding: 20px 30px 15px 30px;">
                <p style="font-size:18px; text-align:center; font-weight:bold;">BV Needed For Platinum Package: 75</p>

                <p style="font-size:20px; color:red; text-align:center; font-weight:bold;">Current BV: <input
                        type="text" name="bv" id="bv" value="0" readonly></p>
                <br/>

                <div class="row text-center">
                    <div class="col-3 text-center">
                        <select name="product1" class="form-control" id="p1" onchange="updateDue()">
                            <option value="">Please Select A Product</option>
                            <option value="1|15">Product 1</option>
                            <option value="2|13">Product 2</option>
                            <option value="3|9">Product 3</option>
                            <option value="4|8">Product 4</option>
                            <option value="5|13">Product 5</option>
                            <option value="6|13">Product 6</option>
                        </select>
                    </div>
                    <div class="col-3 text-center">
                        <select name="product1" class="form-control" id="p2" onchange="updateDue()">
                            <option value="">Please Select A Product</option>
                            <option value="1|15">Product 1</option>
                            <option value="2|13">Product 2</option>
                            <option value="3|9">Product 3</option>
                            <option value="4|8">Product 4</option>
                            <option value="5|13">Product 5</option>
                            <option value="6|13">Product 6</option>
                        </select>
                    </div>
                    <div class="col-3 text-center">
                        <select name="product1" class="form-control" id="p3" onchange="updateDue()">
                            <option value="">Please Select A Product</option>
                            <option value="1|15">Product 1</option>
                            <option value="2|13">Product 2</option>
                            <option value="3|9">Product 3</option>
                            <option value="4|8">Product 4</option>
                            <option value="5|13">Product 5</option>
                            <option value="6|13">Product 6</option>
                        </select>
                    </div>
                    <div class="col-3 text-center">
                        <select name="product1" class="form-control" id="p4" onchange="updateDue()">
                            <option value="">Please Select A Product</option>
                            <option value="1|15">Product 1</option>
                            <option value="2|13">Product 2</option>
                            <option value="3|9">Product 3</option>
                            <option value="4|8">Product 4</option>
                            <option value="5|13">Product 5</option>
                            <option value="6|13">Product 6</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

推荐阅读