Question

我能够制作一个动态下拉子类别，取决于您可以看到它的所选类别here。

现在，我的问题是，如果类别在加载时定义了一个由REQUEST定义的选定值，就像this一样（请注意posted_parent_id请求）。如果我的jQuery如下所示，如何在我的subcategory file（get_child_categories.php?parent_id=6）上拨打电话：

$(document).ready(function($) {
  var list_target_id = 'list_target'; //first select list ID
  var list_select_id = 'list_select'; //second select list ID
  var initial_target_html = '<option value="">Please select a subcategory...</option>'; //Initial prompt for target select

  $('#'+list_target_id).html(initial_target_html); //Give the target select the prompt option

  $('#'+list_select_id).change(function(e) {
    //Grab the chosen value on first select list change
    var selectvalue = $(this).val();

    //Display 'loading' status in the target select list
    $('#'+list_target_id).html('<option value="">Loading...</option>');

    if (selectvalue == "") {
        //Display initial prompt in target select if blank value selected
       $('#'+list_target_id).html(initial_target_html);
    } else {
      //Make AJAX request, using the selected value as the GET
      $.ajax({url: 'get_child_categories.php?parent_id='+selectvalue,
             success: function(output) {
                //alert(output);
                $('#'+list_target_id).html(output);
            },
          error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status + " "+ thrownError);
          }});
        }
    });
});

我的问题是否清楚？我现在还在学习这种东西。如果在加载页面时预先选择了类别下拉列表，那么在if (selectvalue == "")语句中的某处可以定义某些内容吗？

Answer 1

最简单的方法是在加载DOM后手动触发更改事件。

// Assuming that -1 is the default selected value
var selectvalue = $('#'+list_select_id).val();
if(selectvalue != "-1")
{
    $('#'+list_select_id).trigger("change");
}

将代码附加到$(document).ready(function(){ ... })

的末尾

因此，您的代码将成为以下

$(document).ready(function($) {
  var list_target_id = 'list_target'; //first select list ID
  var list_select_id = 'list_select'; //second select list ID
  var initial_target_html = '<option value="">Please select a subcategory...</option>'; //Initial prompt for target select

  $('#'+list_target_id).html(initial_target_html); //Give the target select the prompt option

  $('#'+list_select_id).change(function(e) {
         //  ... your logic here

    });

    // Check if value is prefilled. 
    var selectvalue = $('#'+list_select_id).val();
    // Assuming that -1 is the default value
    if(selectvalue != "-1")
    {
        $('#'+list_select_id).trigger("change");
    }
});

Answer 2

您要做的第一件事就是将AJAX功能移出.change事件。

更改事件仅在dwopdown值更改时触发，如果下拉列表呈现的值为选定值，则不会由更改事件处理。

将其作为单独的函数并在页面加载和.change事件上调用它。

**不是完整的代码**

$(function(){
    var dropdown = $('#'+list_select_id);
    if (dropdown.val() !== "") {
        initiateAJAX(dropdown.val());
    }
    dropdown.change(function() {
        initiateAJAX(this.value);
    }); 

    function initiateAJAX(param) {
    }
});

需要关于我的jQuery脚本的帮助

2 个答案: