Jquery检索从选定的选项文本和打印表

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

这是一个示例，选项不是 T4+T4

Answer 1

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

所以：

$('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>中。

希望这有帮助。