Question

大部分工作都是用php mysql jquery选择的链。但无法设置默认值。一些代码可以工作，但停止链...

假设id = 17

{{1}}

大部分工作都是用php mysql jquery选择的链。但无法设置默认值。一些代码工作但停止链... 谢谢你的帮助

Answer 1

这可以写得很多。

以下代码使用：

HTML中的硬编码默认值。
getOptions()函数，用于调用$.ajax()（并返回jqXHR promise）。
一个.setOptions() jQuery plugin，用于替换select元素的选项，其中的新选项是由data传递的.setOptions()对象构建的。

<强> HTML

<select id="provinces" data-default="17"></select>
<select id="cities" data-default="22"></select>
<select id="suburbs" data-default="95"></select>

每个select标记都包含一个自定义data属性来定义其默认值。如果实现这一点不可能/不方便，那么在javascript中可以实现相同的效果。

<强>的Javascript

$(document).ready(function() {
    function getOptions(id, type) {
        return $.ajax({
            type: 'get',
            url: 'region_action2.php',
            data: { 'parent_id': id, 'type': type },
            dataType: 'json'
        });
    }

    // jQuery plugin for constructing a select element's options from a data object delivered by getOptions().
    // Also, default value is set, and set downstream select elements are cleared/populated.
    $.fn.setOptions = function (data) {
        var self = this.empty() // clear #suburbs and keep reference to `this` for use in the inner function
        $.each(data, function(i, item) {
            var $option = $('<option value="' + item.id + '">' + item.english + '</option>').appendTo(self);
        });
        return self.val(self.data('default')) // set default value
            .nextAll('select').empty() // clear all downstream selects
            .end().trigger('change'); // trigger 'change' on this select
    };

    // *** attach change handlers to `#provinces`, `#cities` etc ***
    $("#provinces").change(function() {
        if(this.selectedIndex > -1) {
            getOptions(this[this.selectedIndex].value, '2').then(function(data) {
                $("#cities").setOptions(data) // create new #cities options and trigger downstream changes.
            });
        }
    });
    $("#cities").change(function() { // note: plural of "city" is "cities"
        if(this.selectedIndex > -1) {
            getOptions(this[this.selectedIndex].value, '3').then(function(data) {
                $("#suburbs").setOptions(data) // create new #suburbs options and trigger downstream changes.
            });
        }
    });

    // *** initialize `#provinces` ***
    getOptions('1', '1').then(function(data) {
        $("#provinces").setOptions(data) // create new #provinces options and trigger downstream changes.
    });
});

<强> DEMO

如何使用php mysql jquery选择链中的默认值

1 个答案: