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

Posted 2023-05-07

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

【英文标题】：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

【发布时间】：2021-01-25 19:01:58

【问题描述】：

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

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

我认为这个 0 值来自 <option value="0">-- Select State --</option> 的 id=before_get_state。我想在提交表单frm_shipping_address 时这样做，它应该考虑id="after_get_state" 中的cbo_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
                
            ,
        )
    ,
);
);

【问题讨论】：

嗨，将$("select#cbo_state").val(); 更改为$("#after_get_state").find("select[name=cbo_state]").val() 或只是$("#after_get_state").find("select").val() 并检查一次。

@Swati，它有效，请将您的回复作为答案发布，以便我可以选择它......非常喜欢

@Swati，还有什么方法可以设置 if 条件，以便我可以发送 #before_get_state 的 cbo_state 值或 #after_get_state 的 cbo_state 值？请告诉我

你怎么知道要发送哪个值？

@swati，当会员登录并且如果会员在他/她的个人资料中设置了国家/州，那么这些国家/州的值将默认显示在此页面上。在这种情况下，成员不会更改国家/地区，因此不会在 onChange 事件上调用 get_state() 函数，因此我将一无所有作为 #after_get_state 的 cbo_state 的值，因为 #after_get_state div 中的代码永远不会叫。请让我知道我是否解释得当。

【参考方案1】：

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