Question

我想打印包含所有输入值和所选选项文本的表单。它适用于文本和数字输入的其余部分，但问题在于选择选项。无论选择何种选项，它都只打印下拉列表中的第一个选项（T4 + T4）。我希望它从所选的选项中打印文本

<div id="printContent">
<table border="1" class="css-serial" id="POITable">
                <!-- Rand Titlu -->
                <tr>
                    <th>Nr</th>
                    <th>Latime (mm)</th>
                    <th>Lungime (mm)</th> 
                    <th>Cantitate</th>
                    <th>Material</th>
                    <th>Client</th>
                    <th>Suprafata (m2)</th>
                    <th>Total (€)</th>
                    <th>Sterge</th>
                </tr>
                    <!-- Rand 1 formular -->
                <tr class="item">
                    <td>1</td>
                    <td><input id="latime_sticla" type="number" class="form-control lat amount" value=""></td>
                    <td><input id="lungime_sticla" type="number" class="form-control lung amount" value=""></td>
                    <td><input type="number" class="form-control cant amount" value=""></td>
                    <td>
                        <select id="materialSticla" name="material" class="form-control price amount" onchange="calculPret()">
                            <option value="13.5">T4+T4</option>
                            <option value="14.5">T4+Low</option>
                            <option value="16.1">T4+4 Anotimpuri</option>
                            <option value="18.5">T4+P</option>
                            <option value="20.8">T4+Stopsol</option>
                            <option value="16.5">T4+Niagara Alb</option>
                            <option value="14.7">T4+Delta Alb</option>
                            <option value="15.5">T4+Diamant</option>
                            <option value="15.5">T4+Krizet</option>
                            <option value="16.5">T4+Cincilla Alb</option>
                            <option value="19.5">T4+Niagara Bronz</option>
                            <option value="19.5">T4+Delta Bronz</option>
                            <option value="19.5">T4+Cincilla Bronz</option>
                            <option value="19.8">Oglinda+Oglinda</option>
                            <option value="21.5">Oglinda+Mat Alb</option>
                            <option value="24.5">Oglinda+Mat Bronz</option>
                            <option value="24.21">T4+T4+4 Anotimpuri</option>
                            <option value="25.6">T4+4 Anotimpuri+Low</option>
                            <option value="26.8">T4+T4+Mat Alb</option>
                            <option value="27.8">T4+T4+Mat Bronz</option>
                            <option value="29.6">T4+4 Anotimpuri + Mat Alb</option>
                            <option value="30.6">T4+4 Anotimpuri + Mat Bronz</option>
                        </select>
                    </td>
                    <td><input type="text" class="form-control" value=""></td>
                    <td><input type="text" name="suprafata" class="form-control totals" id="totals" value=""readonly="readonly"></td>
                    <td><input type="text" name="total" class="form-control total" id="total1" value=""readonly="readonly"></td>
                    <td><input type="button" class="btn btn-danger" id="delPOIbutton" value=" - " onclick="deleteRow(this)"/></td>
                </tr>
            </table>
            </div>

这是javascript

function calculPret() {

$(".item").each(function () {
            var lat = 1;
            var lung = 1;
            var cant = 1;
            var price = 1;
            var total = 1;
            if (!isNaN(parseFloat($(this).find(".lat").val()))) {
                lat = parseFloat($(this).find(".lat").val());
            }
            if (!isNaN(parseFloat($(this).find(".lung").val()))) {
                lung = parseFloat($(this).find(".lung").val());
            }
            if (!isNaN(parseFloat($(this).find(".cant").val()))) {
                cant = parseFloat($(this).find(".cant").val());
            }
             if (!isNaN(parseFloat($(this).find(".price").val()))) {
                price = parseFloat($(this).find(".price").val());
            }

            var arie = (lung * lat);
            var arieM = (arie / 1000000);
            var pretTotal = (arieM * price * cant);
            total = pretTotal;
            $(this).find(".totals").val(arieM.toFixed(2));
            $(this).find(".total").val(total.toFixed(2));
        });

var sum = 0;

$(".total").each(function () {

    if (!isNaN(this.value) && this.value.length != 0) {
        sum += parseFloat(this.value);
        }
    });

var sumsuprafata = 0;

$(".totals").each(function () {

    if (!isNaN(this.value) && this.value.length != 0) {
        sumsuprafata += parseFloat(this.value);
        }
    });

    $("#totalSuprafata").val(sumsuprafata.toFixed(2));
    $("#totalPret").val(sum.toFixed(2));
    $("#TVA").val(sum.toFixed(2) * 0.19);
    $("#totalPretTVA").val(parseFloat(sum.toFixed(2)) + parseFloat(($("#TVA").val())));
}

function printDiv() {

$('form input[type=number]').each(function() {
    $(this).attr('value', $(this).val());
});

$('form input[type=text]').each(function() {
    $(this).attr('value', $(this).val());
});

$("select").change(function() {
    $(this.options[this.selectedIndex].text);
});

  var divToPrint = document.getElementById('printContent');
  newWin = window.open("");
  newWin.document.write(divToPrint.outerHTML);
  newWin.print();
  newWin.close();
}

here is an example, the options were not T4+T4

Answer 1

我相信您的目标是确保在将表格内容写入新窗口时，将在新窗口中选择所选值。因此，换句话说，您需要确保用户选择的'selected'标记上存在<option>属性。

所以：

$('select').change(function() {
    $(this.options).removeAttr('selected');
    $(this.options[this.selectedIndex]).attr('selected', 'selected');
});

说明：

$(this.options).removeAttr('selected');

从上一个选项中删除selected属性，

$(this.options[this.selectedIndex]).attr('selected', 'selected');

将selected属性添加到新选择的<option>。

希望这有帮助。

Jquery检索表单选择的选项文本和打印表

1 个答案: