0

输入框值如何通过 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>
4

1 回答 1

0

这是一个功能齐全的简单演示解决方案,我设法为对同一问题感兴趣的任何人整理。它展示了一个带有“租赁设备”的“滑雪场”。它用于将值JavaScript链接Select OptionsText Inputs值并进行计算,包括将数字输出到单词。欢迎提出意见和建议。

<?php
// Numbers to Words basic
$words = array('0'=> '' ,'1'=> 'one' ,'2'=> 'two' ,'3' => 'three',
'4' => 'four','5' => 'five','6' => 'six','7' => 'seven','8' => 'eight',
'9' => 'nine','10' => 'ten','11' => 'eleven','12' => 'twelve','13' => 'thirteen',
'14' => 'fourteen','15' => 'fifteen','16' => 'sixteen','17' => 'seventeen',
'18' => 'eighteen','19' => 'nineteen','20' => 'twenty','30' => 'thirty','40' => 'forty',
'50' => 'fifty','60' => 'sixty','70' => 'seventy','80' => 'eighty','90' => 'ninety','100' => 'hundred',
'1000' => 'thousand','100000' => 'hundred thousand','10000000' => 'ten million');

function NumWords($num)
{    
    global $words;

    if($num == 0){

        return '';

        } else {        

        $NumValue='';
        $HighNum=$num;
        $RemainNum=0;
        $valueHundred=100;
        $valueThousand=1000;

            while($num>=100)    {

                if(($valueHundred <= $num) &&($num  < $valueThousand))    {
                    $NumValue=$words["$valueHundred"];
                    $HighNum = (int)($num/$valueHundred);
                    $RemainNum = $num % $valueHundred;
                    break;
                }
                    $valueHundred= $valueThousand;
                    $valueThousand = $valueHundred * 100;
                }       

          if(array_key_exists("$HighNum",$words)){
              return $words["$HighNum"]." ".$NumValue." ".NumWords($RemainNum);
         } else {
             $unit=$HighNum%10;
             $ten =(int)($HighNum/10)*10;            
             return $words["$ten"]." ".$words["$unit"]." ".$NumValue." ".NumWords($RemainNum);
           }
    }
}
?>

<html>
<head>

<script type="text/javascript">

        // To link per index, get value per selection index and set value per input index (Item to Fee)
        function itemAmount(){

        objitem = document.getElementsByName("item[]"); // Array of elements named Items
        objfee = document.getElementsByName("fee[]"); // Array of elements named Fees

        for (var i = 0; i < objitem.length; i++) {

                selindex = objitem[i].options[objitem[i].selectedIndex]; // Get the current selected option index

                // Following lines will get values per index of selection and set the value we assign, 
                // to the input with the same index

                if(selindex.value=='None'){ 
                objfee[i].value = '0';
                }

                if(selindex.value=='Boots'){
                objfee[i].value = '125';
                }

                if(selindex.value=='Poles'){
                objfee[i].value = '150';            
                }

                if(selindex.value=='Helmet'){
                objfee[i].value = '175';
                }

                if(selindex.value=='Jacket'){
                objfee[i].value = '200';
                }               

                if(selindex.value=='Gloves'){
                objfee[i].value = '75';
                }               

                if(selindex.value=='Mittens'){
                objfee[i].value = '115';
                }               

            }

        }

        // To link per index, get value per selection index and set value per input index (Duration to Time)
        function durationTime(){

        objduration = document.getElementsByName("duration[]");
        objtime = document.getElementsByName("time[]");

        for (var i = 0; i < objduration.length; i++) {

                selindex = objduration[i].options[objduration[i].selectedIndex];
                objtime[i].value = selindex.value;


            }

        }

</script>

</head>
<body>
<center>
<h1>Welcome to Mountain Ski Resort</h1>
<form method="post">
<fieldset style="width: 200px; height: 400px;">
  <legend>Equipment Rentals</legend>
<table border="1">
<tr><thead><th>Row ID</th>
<th>Item</th>
<th>Fee</th>
<th colspan="2">Duration</th>
</thead>
</tr>
<?php
// Create the form with 10 Rows of Selections and Input - Can be decreased/increased to any desired number
 for($i=1; $i<=10; $i++){
?>
<tr>
<td align="right"><?php echo $i ?></td>
<td>
<select name="item[]" onchange="itemAmount()">
<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" value="0" readonly></td>
<td>
<select name="duration[]" onchange="durationTime()">
<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" value="0" readonly></td>
</tr>
<?php
}
?>

<tr><td colspan="5" align="middle"><input type="submit" value="Submit" /></td></tr>
</table>
</fieldset>
</form>

<?php

//  Echo the submitted data to view

echo '<fieldset style="width: 300px;">
 <legend>Submitted data</legend>
<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>';

$grandTotal = 0;

for ($i=0;$i < count($_POST['item']);$i++){

$row=$i+1;

// Calculate Row Totals based on fees multiplied by duration
$fee = $_POST['fee'][$i];
$duration = $_POST['duration'][$i];
$total = $fee * $duration;

// Addup Totals Column for a Grand Total
$grandTotal += $total;

// Format outputs
$fee_formatted = '$' . number_format(intval($fee), 2, '.', ',');
$total_formatted = '$' . number_format($total, 2, '.', ',');
$duration_formatted = $duration . ':00';
$grandTotal_formatted =  '$' . number_format($grandTotal, 2, '.', ',');

// 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 '<tr><td colspan="5">Grand Total US$:&nbsp;' . NumWords($grandTotal) . '</td>' .
'<td align="right">'. $grandTotal_formatted .'</td></tr>';

echo '</table></fieldset>';

?>
</center>
</body>
</html>
于 2012-12-12T21:06:06.313 回答