输入框值如何通过 if 值链接到选择?在下面的代码中,JQuery 为每个选择选项采用错误的索引,该选项应该只更新它自己的链接输入框中的文本。非常感谢您的帮助!
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select[name='item[]']").change(function() {
// Link per each Item selection and its value base on if, to the input boxes, based on the index
if ($(this).val() === 'None') {
$("input[name='fee[]']").eq($(this).index("select")).val('0');
}
if ($(this).val() === 'Boots') {
$("input[name='fee[]']").eq($(this).index("select")).val('125');
}
if ($(this).val() === 'Poles') {
$("input[name='fee[]']").eq($(this).index("select")).val('150');
}
if ($(this).val() === 'Helmet') {
$("input[name='fee[]']").eq($(this).index("select")).val('175');
}
if ($(this).val() === 'Jacket') {
$("input[name='fee[]']").eq($(this).index("select")).val('275');
}
if ($(this).val() === 'Gloves') {
$("input[name='fee[]']").eq($(this).index("select")).val('75');
}
if ($(this).val() === 'Mittens') {
$("input[name='fee[]']").eq($(this).index("select")).val('85');
}
}).change()
// Debugging : change bgcolor on hover
$("select[name='item[]']").hover(function() {
$("input[name='fee[]']").eq($(this).index("select")).css("background","#a6955d");
}, function() {
$("input[name='fee[]']").eq($(this).index("select")).css("background","white");
});
$("select[name='duration[]']").change(function() {
// Link per each Item Duratin selection and its value base on if, to the input boxes, based on the index
if ($(this).val() === '0') {
$("input[name='time[]']").eq($(this).index("select")).val('0');
}
if ($(this).val() === '1') {
$("input[name='time[]']").eq($(this).index("select")).val('1');
}
if ($(this).val() === '2') {
$("input[name='time[]']").eq($(this).index("select")).val('2');
}
if ($(this).val() === '3') {
$("input[name='time[]']").eq($(this).index("select")).val('3');
}
}).change()
// Debugging : change bgcolor on hover
$("select[name='duration[]']").hover(function() {
$("input[name='time[]']").eq($(this).index("select")).css("background","#a6955d");
}, function() {
$("input[name='time[]']").eq($(this).index("select")).css("background","white");
});
});
</script>
</head>
<body>
<h1 style="align:middle;">Welcome to Mountain Ski Resort</h1>
<form method="post">
<table border="1">
<tr><thead><th>Row ID</th>
<th>Item</th>
<th>Fee</th>
<th colspan="2">Duratin</th>
</thead>
</tr>
<?php
// Create the form with Selections and Input rows
for($i=1; $i<=10; $i++){
?>
<tr>
<td align="right"><?php echo $i ?></td>
<td>
<select name="item[]">
<option value='None' selected>Select Item</option>
<option value='Boots'>Boots</option>
<option value='Poles'>Poles</option>
<option value='Helmet'>Helmet</option>
<option value='Jacket'>Jacket</option>
<option value='Gloves'>Gloves</option>
<option value='Mittens'>Mittens</option>
</select></td>
<td><input name="fee[]" size="10" readonly></td>
<td>
<select name="duration[]">
<option value='0' selected>Select Duration</option>
<option value='1'>One Hour</option>
<option value='2'>Two Hours</option>
<option value='3'>Three Hours</option>
</select></td>
<td><input name="time[]" size="10" readonly></td>
</tr>
<?php
}
?>
<tr><td colspan="5" align="middle"><input type="submit" value="Submit" /></td></tr>
</table>
</form>
<?php
// Echo the submitted data to view
echo '<h2>Submitted data:</h2>';
echo '<table border="1">
<tr><thead><th>Row ID</th>
<th>Item</th>
<th>Fee</th>
<th colspan="2">Duration</th>
<th>Total</th>
</thead>
</tr>';
for ($i=0;$i < count($_POST['item']);$i++){
$row=$i+1;
// Calculate Totals based on fees multiplied by duration
$fee = $_POST['fee'][$i];
$duration = $_POST['duration'][$i];
$total = $fee * $duration;
// Format outputs
$fee_formatted = '$' . number_format(intval($fee), 2, '.', ',');
$total_formatted = '$' . number_format($total, 2, '.', ',');
$duration_formatted = $duration . ':00';
// Output all data submitted and calculation into a table to view
echo '<tr>
<td align="right">' . $row .
'</td><td>' . $_POST['item'][$i] .
'</td><td align="right">' . $fee_formatted .
'</td><td colspan="2" align="right">' . $duration_formatted .
'</td><td align="right">' . $total_formatted .
'</td></tr>';
}
echo '</table>';
?>
</body>
</html>