0
我有这个JavaScript在这里应该显示/隐藏基于选择框的选择一个div。当我尝试将其插入数据库时，它只插入最后一个选项（paypal）。无法保存到数据库时使用javascript .change功能
例如，如果我选择一个现金选项，它会在数据库中插入一个空白字段。而如果我选择贝宝，它会插入它..其余的选项也一样。只有贝宝正在插入。
（我从事我的英语不好，我的意大利面条代码道歉）
$(document).ready(function(){
$("#payment").change(function(){
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="bank"){
$(".box1").not(".bank").hide();
$(".bank").show();
}
else if($(this).attr("value")=="cash"){
$(".box1").not(".cash").hide();
$(".cash").show();
}
else if($(this).attr("value")=="cheque"){
$(".box1").not(".cheque").hide();
$(".cheque").show();
}
else if($(this).attr("value")=="invoice"){
$(".box1").not(".invoice").hide();
$(".invoice").show();
}
else if($(this).attr("value")=="paypal"){
$(".box1").not(".paypal").hide();
$(".paypal").show();
}
else{
$(".box1").hide();
}
});
}).change();
});<style type="text/css">
.box{
display: none;
}
.box1{
display: none;
}
.income{ background: #fff; }
.expense{ background: #fff; }
.blue{ background: #fff; }
.cash{ background: #fff; }
.card{ background: #fff; }
.cheque{ background: #fff; }
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<select id="payment" name="payment_type" class="form-control" required>
<option value="" disabled selected>Select Payment Type</option>
<option value="bank">Bank Transfer</option>
<option value="cash">Cash</option>
<option value="cheque">Cheque</option>
<option value="invoice">Invoice</option>
<option value="paypal">Paypal</option>
</select>
</div></div>
<div class="form-group bank box1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" name="transaction_amount" class="form-control" placeholder="Bank Account" maxlength="40" />
</div>
</div>
<div class="form-group cash box1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" name="transaction_amount" class="form-control" placeholder="Cash Amount" maxlength="40" />
</div>
</div>
<div class="form-group cheque box1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" name="transaction_amount" class="form-control" placeholder="Cheque Reference" maxlength="40" />
</div>
</div>
<div class="form-group invoice box1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" name="transaction_" class="form-control" placeholder="Invoice Number" maxlength="40" />
</div>
</div>
<div class="form-group paypal box1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" name="transaction_amount" class="form-control" placeholder="Paypal Reference" maxlength="40" />
</div>
</div>
似乎没有一个实际的表单元素，只是一系列的输入，所以不可能说出您的提交方法可能会发生什么。我会指出，你的问题很大一部分可能源于你的所有输入元素具有相同的名称。由于name属性是表单提交在数据服务器端区分不同元素的方式，因此您之前的所有数据都被您最后定义的名为'transaction_amount'的元素覆盖了。 – Ryan
我试图将php插入该片段，但它没有工作，我也在考虑名称元素..如果我不想使用不同的名称，数组可以工作吗？ –
您需要为每个输入元素使用不同的名称，否则浏览器将只覆盖所有内容。如果你不想在'transaction_amount'上有五种不同的变化形式，可以考虑使用一个输入字段，然后是一个单选按钮或者其他类型的付款类型？ – Ryan