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>

Page 2-Form B）

相同的下拉列表+第二个下拉列表（Ajax根据下拉列表选择加载的值）

 <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>

现在问题！ 从Page1按下继续，我将下拉值传递给第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值的程序化更改而触发。

当用户提交元素值的更改时，<input>，<select>和<textarea>元素会触发更改事件>。（Change event on MDN）

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

dropdown1_id.trigger('change');

这是一个simple fiddle来演示。

通过预先选择的下拉列表加载Ajax下拉列表

1 个答案: