我想做的是创建一个表单。他们看到的第一个问题也是唯一一个问题是一个下拉框，允许他们选择一个州。一旦他们选择了一个州，等待他们的选择，它将根据他们的选择选择一个检查列表。检查列表将有大约20个选项，但目前只有6个。
然后用户可以浏览检查列表并勾选他们想要的项目。一旦选中了某项商品，它下面就会出现另一个div，提示用户输入购买该商品的年限和数量。这是我到目前为止讲到的部分。
但是现在，这就是我被困在哪里，我想做什么。我确实添加了服务费、许可费和培训时数的隐藏输入值。一旦用户检查了一个项目，我想使用jQuery来计算服务费用的年数，从而得到total_service。然后将total_service和许可费用相加，得到item_cost。然后item_cost乘以数量，然后得到total_item_cost。
然后我想要获取并显示、显示或列出项目描述、服务费、年限、许可费、数量和培训时间，以行、div或表格的形式显示，有点像购物车。每次选中一个项目时，它将在下面显示每个项目。
最后，在列表的底部，我想要得到项目的总成本和总训练时间。
现在我对年份的下拉菜单有问题，它似乎重置了自己。还有计算的问题。至于表单，一旦我提交了表单，它就会发送给人们，电子邮件等等。只是想让jquery代码首先工作。
任何建议都很好。代码如下…
<style>
.box {
display: none;
}
</style>
<form name="" id="myForm" method="post" class="" action="http://demo.camavision.com/VCSWeb/remarks-look-up/" >
<div class="tx-row" style="width:100%; float:left; clear:right;">
<div style="float:left; margin-top:-20px; ">
<label>
<strong style="font-size:14px;">State:</strong> <span style="font-size:10px; color:#ff0000;">(required)</span><br />
<select style= "width:90%; height:35px; font-size:18px; border: 1px #396ba5 solid;" id="state" name="state" required>
<option value="" selected="selected" >Select State</option>
<option value="IlIaNd" >Iowa</option>
<option value="IlIaNd" >Illinois</option>
<option value="Minnesota" >Minnesota</option>
<option value="Missouri" >Missouri</option>
<option value="Nebraska" >Nebraska</option>
<option value="IlIaNd" >North Dakota</option>
<option value="SouthDakota" >South Dakota</option>
</select>
</label>
</div>
</div>
<script>
$(document).ready(function(){
$("#state").change(function(){
$(this).on('change', function() {
if(this.value =="IlIaNd"){
$(".box").not(".IlIaNd").hide();
$(".IlIaNd").show();
}else if(this.value =="Minnesota"){
$(".box").not(".Minnesota").hide();
$(".Minnesota").show();
}else if(this.value =="Missouri"){
$(".box").not(".Missouri").hide();
$(".Missouri").show();
}else if(this.value =="Nebraska"){
$(".box").not(".Nebraska").hide();
$(".Nebraska").show();
}else if(this.value =="SouthDakota"){
$(".box").not(".SouthDakota").hide();
$(".SouthDakota").show();
}else{
$(".box").hide();
}
});
}).change();
});
</script>
<div style="width: 100%; float:left; clear:both; height:25px;" > </div>
<div style="border-bottom: 1px solid #cccccc; width: 100%; float:left; clear:both;" > </div>
<div style="width: 100%; float:left; clear:both; height:25px;" > </div>
<div style="width: 100%; float:left; clear:both;" class="IlIaNd box">
//<p>States test 1</p>
<?php IlIaNd_Price_Quote_Form() ?>
</div>
<div style="width: 100%; float:left; clear:both;" class="Minnesota box" >
<p>Minnesota test 2</p>
</div>
<div style="width: 100%; float:left; clear:both;" class="Missouri box">
<p>Missouri test 3</p>
</div>
<div style="width: 100%; float:left; clear:both;" class="Nebraska box" >
<p>Nebraska test 4</p>
</div>
<div style="width: 100%; float:left; clear:both;" class="SouthDakota box">
<p>SouthDakota test 5</p>
</div>
<span id="total_item_fees"> </span>
<script>
$(document).ready(function()
{
//hide all contents
$('div[id^=sb]').hide();
$('input[id^=chk]').change(function(){
// get checkbox index
var index = $(this).attr('id').replace('chk','');
//show respective contents
if($(this).is(':checked')){
$('#sb'+index).show();
item_calculation();
} else {
$('#sb'+index).hide();
}
});
function item_calculation() {
var descr = $('input[name="descr"]').val();
var fee1 = $('input[name="fee1"]').val();
var years = $('input[name="Years"]').val();
var fee2 = $('input[name="fee2"]').val();
var qty = $('input[name="Qty"]').val();
var main_fees = (fee1 * years);
var item_fees = (main_fee + license);
var total_fees = (item_fees * qty).toFixed(2);
$("#total_item_fees").html(total_fees );
}
});
</script>
</form>
下面是PHP代码:
if (pg_num_rows($result) > 0){
echo "<div class='"tx-row'" style='width:100%; clear:both; '" >
<div style='"width: 100%; float:left; clear:both; height:25px;'" > </div>";
while ($row = pg_fetch_object($result)){
echo "<div class='"tx-column tx-column-size-1-3'" >
<input type='checkbox' name='descr' id='chk".$row->id."' value='".$row->id."'> ".$row->descr;
if ($row->id == "8" || $row->id == "10" ){
echo "<div id='sb".$row->id."' style='width:100%;'>
<div style='width:50%; float:left;'>
Years: <select name='Years'>
<option value='"1'">1</option>
<option value='"2'">2</option>
<option value='"3'">3</option>
<option value='"4'">4</option>
<option value='"5'">5</option>
</select>
</div>
<div style='width:50%; float:left;'>
Quantity: <select name='Qty'>
<option value='"1'">1</option>
<option value='"2'">2</option>
<option value='"3'">3</option>
<option value='"4'">4</option>
<option value='"5'">5</option>
</select>
</div>
<input type='hidden' name='fee1' id='fee1' value='".$row->fee1."'>
<input type='hidden' name='fee2' id='fee2' value='".$row->fee2."'>
<input type='hidden' name='hrs' id='hrs' value='".$row->hours."'>
</div>";
} else {
echo "<div id='sb".$row->id."'>
Years: <select name='"years'">
<option value='"1'">1</option>
<option value='"2'">2</option>
<option value='"3'">3</option>
<option value='"4'">4</option>
<option value='"5'">5</option>
</select>
<input type='hidden' name='Qty' value='1'>
<input type='hidden' name='fee1' value='".$row->fee1."'>
<input type='hidden' name='fee2' value='".$row->fee2."'>
<input type='hidden' name='hrs' value='".$row->hours."'>
</div>";
}
echo "</div>";
}
echo "</div>";
}
}
Ok…我已经修复了当用户检查一个项目，然后选择数量或年份，它不会从形式移出的问题。第一部分更新后的jquery是这样的:
<script>
$(document).ready(function(){
$("#state").change(function(){
$(this).on('change', function() {
if(this.value =="IlIaNd"){
$(".box").not(".IlIaNd").hide();
$(".IlIaNd").show();
}else if(this.value =="Minnesota"){
$(".box").not(".Minnesota").hide();
$(".Minnesota").show();
}else if(this.value =="Missouri"){
$(".box").not(".Missouri").hide();
$(".Missouri").show();
}else if(this.value =="Nebraska"){
$(".box").not(".Nebraska").hide();
$(".Nebraska").show();
}else if(this.value =="SouthDakota"){
$(".box").not(".SouthDakota").hide();
$(".SouthDakota").show();
}else{
$(".box").hide();
}
});
}).change();
});
</script>
现在，下一步是某种onclick，也许当他们点击其中一个复选框时，它会计算服务费用乘以年以获得total_service。然后将total_service和许可费用相加，得到item_cost。然后item_cost乘以数量，然后得到total_item_cost。说到jquery和ajax，我还是个新手。所以我正在努力学习尽可能多的东西。
接下来，我要做的是获取并显示、显示或列出项目描述、服务费、年限、许可费、数量和培训时数，以行、div或表格的形式显示，有点像购物车。每次选中一个项目时，它将在下面显示每个项目。
最后，在列表的底部，我想要得到项目的总成本和总训练时间。
再说一遍，如果你有什么想法，请告诉我。