获取所选项目的值并在第二个下拉列表中更改列表

时间:2013-11-04 19:27:24

标签: javascript php jquery ajax

我想在第一个下拉列表中选择一个项目时更改第二个下拉列表

$output_body = '<select>';
$accounts = $service->management_accounts->listManagementAccounts("~all");
  foreach($accounts['items'] as $item) {
 $output_body .= sprintf('<option value="%d">%s</option>', $item['id'], $item['name']);
    }
    $output_body .= '</select>';

所以当我从上面的下拉列表中选择一个项目时,它应该将所选项目的值存储在变量中,并且这个变量将在这里使用,我相信更新下拉列表

$webproperties = $service->management_webproperties->listManagementWebproperties("var here");
    foreach($webproperties['items'] as $item) {
        $output_prop .= sprintf('<option value="">%s</option>', $item['name']);
    }
    $output_prop .= '</select>'; 

2 个答案:

答案 0 :(得分:0)

这是jQuery中级联下拉列表的一个很好的例子。 (根据另一个选择填充一个)

<script>
    $(function () {
        var productsSelect = $('#productId');
        productsSelect.attr('disabled', true);
        $('#categoryId').change(function () {
            var categoryId = $(this).val();
            $.getJSON('/GetProducts/' + categoryId, function (products) {
                productsSelect.attr('disabled', false);
                productsSelect.empty();
                productsSelect.append(
                        $('<option/>')
                            .attr('value', '')
                            .text('-- Select Product --'));
                $.each(products, function (index, product) {
                    productsSelect.append(
                        $('<option/>')
                            .attr('value', product.ProductId)
                            .text(product.ProductName)
                    );
                });
            });
        });
    });
</script>

答案 1 :(得分:0)

我认为能够在父元素上使用事件冒泡与html数据元素一起使用,将请求提交给您的php控制器并将选项数据分配回您的视图会很好,但我是不确定你是否有mvc框架来支持这个......

 window.addEvent('domready', function() {
        $('parent_option_list_container').addEvent('click:relay(a)', function(e, ele) {
    if (ele.hasClass('some_option_in_the_list')) {
        e.preventDefault();
        var selected = ele.get('data-option-value');

                    var request = new Request({
        method: 'POST',
        url : '/form_controller/option_select_toggle_function/' + selected,

        }).send();
    }

}