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

product_listing.php FORM部件

<?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_php(在类别选择框的基础上自动填充子类别选择框(

在这个页面上，处理后的POST数据和结果数据存储在Arrayarr_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."'>";

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

加载页面时，类别数组的第一个值默认显示在第一个选择框中。根据第一个选择框中的默认类别，正确的子类别值将填充到第二个选择框，其中子类别数组的第一个值默认显示在第一个。之后，根据第二个选择框中的默认子类别，正确的数量显示在数量文本框中。如果我从第二个选择框更改子类别，它会为所选子类别提供正确的数量值。

现在，问题是，当我更改第一个选择框中的值时，它在第二个选择框给出了正确的子类别值，但在第二选择框中默认子类别值的基础上，没有对数量文本框进行任何更改。现在，如果我在第二个选择框中更改子类别值，它仍然不会在所选子类别值的基础上更改数量文本框的值。

因此，当页面加载时，默认选择的类别和默认选择的子类别的数量会正确显示。如果我不更改类别，只更改子类别，它会给出正确的数量。一旦我更改了类别，我就会得到这个选定类别的正确子类别值。但我没有得到任何子类别的正确数量。

所以请让我知道我在代码中做错了什么，或者缺少了什么？

由于子类别选择框是动态创建的，您需要在ajax的成功函数下调用get_qty(subcatln)，并传递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>

第二种方法：您可以检查divafter_get_subcat_ln中是否有任何select，根据这一点，您可以获得select的值，并将其传递给您的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
}
});
}

这实际上是一个JS问题。您忘记在php脚本中添加onChange。因此，每当您的<select>被替换时，onChange就会丢失。

$('#btn').on('click', function() {
$('#select').html('<select><option>A</option><option>B</option>');
});
$('#btn2').on('click', function() {
$('#select').html('<select onChange='alert("yay" + this.value);'><option>A</option><option>B</option>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="select">
<select>
<option>1</option>
<option>2</option>
</select>
</div>
<hr />
<button id="btn">Load list without onChange</button><br />
<button id="btn2">Load list with onChange</button>

你可能也想读一下：MCVE

相关内容

最新更新

热门标签：