javascript - 如何在第一个选择框的基础上自动填充第二个选择框并在第二个选择框的基础上自动填充文本框

Question

product_listing.php 表格部分

<?php 
$arr_cat_bn = [category01, category02];
$arr_subcat_ln_for_cbo_default = [subcategory01, subcategory02]; // For category01
$arr_subcat_ln_for_cbo_default = [subcategory11, subcategory12]; // For category02

$str_cat_bn_default = $arr_cat_bn[0];
if(isset($_POST["cbo_cat_bn"]))
{
    $str_cat_bn_default = trim($_POST["cbo_cat_bn"]);
}

$str_subcat_ln_form = $arr_subcat_ln_for_cbo_default[0];
if(isset($_POST["cbo_subcat_ln"]))
{
        $str_subcat_ln_form = trim($_POST["cbo_subcat_ln"]);
}
?>

<form role="form" name="frm_add" method="POST" action="product_listing.php">

    <select name="cbo_cat_bn" id="cbo_cat_bn" onChange="get_subcat_ln(this.value);">
        <?php 
        foreach($arr_cat_bn as $cat_bn) { 
            if($str_cat_bn_default == $cat_bn) { $str_selected="selected"; } else { $str_selected = ""; } ?>
            <option value="<?php echo $cat_bn; ?>" <?php print($str_selected);?>><?php echo $cat_bn; ?></option>
    </select>   
                
    <div id="before_get_subcat_ln">
        <select name="cbo_subcat_ln" id="cbo_subcat_ln"  onChange="get_qty(this.value);">
            <?php 
            sort($arr_subcat_ln_for_cbo_default);
            foreach($arr_subcat_ln_for_cbo_default as $subcat_ln) { 
            if(trim($str_subcat_ln_form) == trim($subcat_ln))  { $str_selected_ln = "selected"; } else { $str_selected_ln = ""; } 
            ?>
            <option value="<?php echo $subcat_ln; ?>" <?php print($str_selected_ln);?>><?php echo $subcat_ln; ?></option>
        </select>
    </div>
    <div id="after_get_subcat_ln"></div>    
                        
    <div id="before_get_qty">
        <input type="text" id="txt_qty" name="txt_qty" value="<?php print($int_qty); ?>">
    </div>
    <div id="after_get_qty"></div>    
               
    <button type="submit" >SUBMIT</button>                              
                        
</form>

product_listing.php jQuery 部分

<script>
function get_subcat_ln(catbn) {
var str_catbn = catbn;

    var dataString = "cat_bn_all="+str_catbn;
    $.ajax({
        type: "POST",
        url: "../user/get_subcategory_p.php?",
        data: dataString,
        success: function(html)
        {
            $("#before_get_subcat_ln").hide();
            $("#after_get_subcat_ln").html(html);
        }
    });
}

function get_qty(subcatln) {
var str_subcatln = subcatln;

    var dataString = "cat_bn_all_and_subcat_ln="+str_subcatln;
    $.ajax({
        type: "POST",
        url: "../user/get_qty_p.php?", 
        data: dataString,
        success: function(html)
        {
            $("#before_get_qty").hide();
            $("#after_get_qty").html(html);
        }
    });
}
</script>

get_subcategory_p.php(在类别选择框的基础上自动填充子类别选择框)
在这个页面上，POST 处理的数据和结果数据存储在数组 arr_subcat_ln 中。并像这样返回 PHP 页面。

echo "<select name='cbo_subcat_ln' id='cbo_subcat_ln'>";
sort($arr_subcat_ln);
foreach($arr_subcat_ln as $subcat_ln) { 
    echo "<option value='" . $subcat_ln . "'>" . $subcat_ln . "</option>";
} 
echo "</select>";

get_qty_p.php(在子类别选择框的基础上自动填充数量文本框)
在此页面上，POST 数据处理和结果数据存储在变量 str_PackageSize 中。并像这样返回 PHP 页面。

echo "<input type='text' id='txt_qty' name='txt_qty'  value='".$str_PackageSize."'>";

第一个选择框 = 类别选择框

第二个选择框=子类别选择框

页面加载时，默认情况下，类别数组的第一个值显示在第一个选择框中。并且基于第一个选择框中的默认类别，正确的子类别值填充在第二个选择框中，其中子类别数组的第一个值默认显示在第一位。之后，根据第二个选择框中的默认子类别，在 qty 文本框中显示正确的数量。如果我从第二个选择框更改子类别，它会为所选子类别提供正确的数量值。
现在，问题是，当我在第一个选择框中更改值时，它会在第二个选择框中给出正确的子类别值，但不会根据第二个选择框中的默认子类别值在数量文本框中进行任何更改。现在，如果我在第二个选择框中更改子类别值，它仍然不会根据所选子类别值更改 qty 文本框的值。
因此页面加载时默认选择的类别和默认选择的子类别正确显示数量。如果我不更改类别而只更改子类别，它会提供正确的数量。更改类别后，我将获得此选定类别的正确子类别值。但是我没有得到任何子类别的正确数量。
所以请让我知道我在代码中做错了什么或缺少什么？

Answer 1

由于子类别选择框是动态创建的，您需要调用 get_qty(subcatln)在 ajax 的成功函数下并传递子类别的默认值，该值在 html 中可用.现在，要传递默认值，您可以使用两种方式。它们如下:
第一种方式 : 你可以通过 html选择器中的字符串，即:$()然后使用 find(":first-child").val()这将为您提供选择框的第一个选项，然后您可以将其传递给您的 get_qty(subcatln)功能。
演示代码 :

var html = '<select name="cbo_subcat_ln" id="cbo_subcat_ln"><option value="first">first</option><option value="second">second</option><option value="third">third</option></select>'
 var subcatln = $(html).find(":first-child").val();
 console.log("First default value : "+subcatln);
 //call function
 //get_qty(subcatln)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

第二种方式 :您可以检查 div after_get_subcat_ln里面是否有任何选择，根据这个你可以获得选择的值(value)并将其传递给你的 get_qty(subcatln) .
演示代码 :

var html = '<select name="cbo_subcat_ln" id="cbo_subcat_ln"><option value="first">first</option><option value="second">second</option><option value="third">third</option></select>'

$("#after_get_subcat_ln").html(html);
//check if the div have `cbo_subcat_ln` 
if ($("#after_get_subcat_ln").find("select#cbo_subcat_ln").length > 0) {
  //get that value
  var subcatln = $("select#cbo_subcat_ln :first-child").val()
  console.log("Second way : " + subcatln)
  //call function
  //get_qty(subcatln);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="after_get_subcat_ln"></div>

您需要将上述代码放入 get_subcat_ln(catbn) 的 ajax 成功中功能。即:

function get_subcat_ln(catbn) {
  ...
    $.ajax({
        type: "POST",
        url: "../user/get_subcategory_p.php?",
        data: dataString,
        success: function(html)
        {
            $("#before_get_subcat_ln").hide();
            $("#after_get_subcat_ln").html(html);
          //here you need to get value of either way
          //call get_qty(subcatln) to update qty input
        }
    });
}