入力ボックスの値を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>