在我的jQuery腳本上需要幫助

Question

我能夠根據所選類別創建一個動態下拉列表子類別，您可以在此處看到它。

現在，我的問題是，如果類別在加載時定義了一個由REQUEST定義的選定值，就像這樣 （請注意posted_pa​​rent_id請求）。 如果我的jQuery如下所示，如何調用子類別文件 （ 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 == "")在加載頁面時預先選擇了類別下拉菜單， 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事件。

使它成為一個單獨的函數，並在頁面加載和.change事件時調用它。

**不是完整的代碼**

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

    function initiateAJAX(param) {
    }
});