javascript - 通过预选下拉列表加载 Ajax 下拉列表

Question

我有两页，每页有一个表单

第 1 页 - 表格 A)

一个下拉菜单(从数据库填充值)和继续按钮

<select name="form[formA][]" id="dropdown1">
        <option value="1">Option 01</option>
        <option value="1">Option 02</option>
</select>
<button>CONTINUE</button>

第 2 页-表格 B)

表单 a + 第二个下拉列表中的相同下拉列表(Ajax 根据下拉列表 A 选择加载值)

 <select name="form[formA][]" id="dropdown1">
        <option value="1">Option 01</option>
        <option value="1">Option 02</option>
</select>
 <select name="form[formB][]" id="dropdown2">
        <option value="1">Option 01</option>
        <option value="">Please select from dropdown1</option>
</select>

现在问题来了!从第 1 页按“继续”，我将使用以下代码将下拉值传递到第 2 页

url/page2?form[formA][]={dropdown1:value}

然后在第 2 页上，我的第一个下拉列表被自动选择，但第二个下拉列表(ajax)未加载。

dropdown1_id.on('change',  function(e) {
    var selectvalue = $(this).val();
    //Display 'loading' status in the target select list
    dropdown2_id.html('<option value="">Loading...</option>');
    if (selectvalue == '') 
    {
        dropdown2_id.html(initial_dropdown2_html);
    } 
    else 
    {
        //Make AJAX request, using the selected value as the GET
        $.ajax({
            url: 'index.php',
            data:'option=com_mycomponent&task=getdropdown2sHTML&fvalue='+selectvalue,
            success: function(output) {
                dropdown2_id.html(output);
                updateSelect(dropdown2_id.val());
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status +  ' ' + thrownError);
            }
        });
    }
});

在表单 B - 第 2 页上，没有方向的表单第 1 页及其本身工作正常。

Answer 1

我相信change不会因 select 的编程更改而触发事件的值。

The change event is fired for <input>, <select>, and <textarea> elements when a change to the element's value is committed by the user. (Change event on MDN)

假设dropdown1_id是一个有效的 jQuery 集合，您应该在附加 change 后将以下内容放置在某处听众。请注意您的放置位置，以便更改监听器只会在页面加载时被强制运行一次。

dropdown1_id.trigger('change');

这是一个simple fiddle来演示。