时间戳

首页 > 解决方案 > 在 2 个不同的 div ID 中有 2 个同名的 HTML 下拉列表，那么如何使用 AJAX/jQuery 提交特定 div ID 的下拉值

php - 在 2 个不同的 div ID 中有 2 个同名的 HTML 下拉列表，那么如何使用 AJAX/jQuery 提交特定 div ID 的下拉值

问题描述

以下是我根据所选国家/地区填充州列表的代码。当我从国家下拉列表中选择任何国家时，它会在状态下拉列表中返回正确的状态列表。这部分工作正常。

当我选择美国国家时，国家下拉列表中填充了美国的州，默认选择的州是Alaska. 现在，如果我从州下拉列表中选择另一个州“德克萨斯州”并使用 AJAX / jQuery 提交表单，它只会在表单 POST 数据中发送值 0。

我认为这个 0值来自<option value="0">-- Select State --</option>. id=before_get_state我想在frm_shipping_address提交表单时考虑cbo_statefrom的值id="after_get_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&nbsp;</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
                }
            },
        })
    },
});
});

标签： phpjqueryajax

解决方案

由于您有两个具有相同 id 的选择框，因此它仅获取第一个选择框的值。而不是上面的其他方法是直接使用 .Also 获取值$("#after_get_state").find("select").val()。此外，您可以检查 div ie :#after_get_state是否在其中选择使用.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>

推荐阅读