[英]There are 2 HTML drop downs with same name in 2 different div IDs, so how to submit drop down value of specific div ID using AJAX/jQuery
下面是我根据所选国家/地区填充州列表的代码。 当我 select 从国家下拉列表中的任何国家时,它会在州下拉列表中返回适当的州列表。 这部分工作正常。
当我输入 select country USA 时,states 下拉列表中填满了美国各州,默认选择 state 是Alaska
。 现在,如果我 select 另一个 state 来自州下拉列表的“Texas”并使用 AJAX / jQuery 提交表单,它只会在表单 POST 数据中发送值 0。
我认为这个 0 值来自<option value="0">-- Select State --</option>
的id=before_get_state
。 我想在提交表单frm_shipping_address
时这样做,它应该考虑id="after_get_state"
中的cbo_state
值。
那么我该如何解决这个问题呢? 请帮忙。
国家和 State 下拉菜单
<form name="frm_shipping_address" id="frm_shipping_address" novalidate>
<label>Select Country</label><span class="text-help-form"> * </span>
<select name="cbo_country" id="cbo_country" class="form-control" onChange="get_state(this.value);">
-- Country list is filled from MySQL database using while loop --
</select>
<label>Select State</label><span class="text-help-form"> * </span>
<div id="before_get_state">
<select name="cbo_state" id="cbo_state" class="form-control">
<option value="0">-- Select State --</option>
</select>
</div>
<div id="after_get_state"></div>
<button id="btn_continue" class="btn btn-primary btn-lg btn-block"><b>SUBMIT </b></button>
</form>
jQuery / AJAX 获取所选国家/地区的州列表
jquery.min.js
,页面中包含jqBootstrapValidation.js
文件
<script>
function get_state(countrypkid) {
var int_countrypkid = countrypkid;
var dataString = "countrypkid="+int_countrypkid;
$.ajax({
type: "POST",
url: "./product_address_get_state_p.php",
data: dataString,
success: function(html)
{
$("#before_get_state").hide();
$("#after_get_state").html(html);
}
});
}
</script>
product_address_get_state_p.php 页面代码
-- Fetching states list from MySQL table for selected country pkid --
-- States list is filled from MySQL database using while loop --
product_address.js(表格在这里提交)
(function() {
$("#frm_shipping_address input, #frm_shipping_address textarea, #frm_shipping_address select").jqBootstrapValidation({
preventSubmit: true,
submitSuccess: function($form, event) {
event.preventDefault();
var cbo_country = $("select#cbo_country").val();
var cbo_state = $("select#cbo_state").val();
$.ajax({
url: "./product_address_p.php",
type: "POST",
data: {
cbo_country: cbo_country,
cbo_state: cbo_state
},
cache: false,
success: function(data)
{
var $responseText=JSON.parse(data);
if($responseText.status == 'SUC')
{
// Success message
}
else if($responseText.status == 'ERR')
{
// Fail message
}
},
})
},
});
});
由于您有两个具有相同 ID 的选择框,因此它仅获取第一个选择框的值。上面的其他方法是使用$("#after_get_state").find("select").val()
。此外,您还可以检查 div,即: #after_get_state
中是否包含 select 或不使用.length
,因此如果长度值> 0
,则将此选择框值发送给其他人。
演示代码:
console.log("length = "+$("#after_get_state").find("select").length) //check if div has select inside it or not if ($("#after_get_state").find("select").length > 0) { //there..send this value console.log("slected value = "+$("#after_get_state").find("select").val()) } else { //not there send other select-box value }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div id="before_get_state"> <select name="cbo_state" id="cbo_state" class="form-control"> <option value="0">-- Select State --</option> </select> </div> <div id="after_get_state"> <select name="cbo_state" id="cbo_state" class="form-control"> <option value="0">-- Select State --</option> <option value="1" selected>dcdcdc</option> </select> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.