Question

我的极限。我不能让这个工作：我想用jquery和JSON创建一个动态选择列表来填充数据库中的数据我看到它在firebug控制台中获取数据，但它没有填充选择框。这是我的观点：

<div class="control-group">
            <label class="control-label" for="inputPassword">Grad</label>
            <div class="controls">
                <select name="city" id="city" class="update">
                    <option value="">Odaberi</option>
                    <?php if (!empty($results)) { ?>
                    <?php foreach($results as $row) { ?>
                    <option value="<?php echo $row->city_id; ?>">
                        <?php echo $row->city_name; ?>
                    </option>
                    <?php } ?>
                    <?php } ?>
                </select>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="inputPassword">Deo grada</label>
            <div class="controls">
            <select name="category" id="category" class="update"
        disabled="disabled">
        <option value="">----</option>
    </select>
            </div>
        </div>

这是我的控制器，我打电话给我的模型：

function update_list（）{ $这 - ＆GT; marea-＆GT; update_list（）;

最后我的模特

function update_list(){
    if (!empty($_GET['id']) && !empty($_GET['value'])) {
        $id = $_GET['id'];
        $value = $_GET['value'];

        try {
            $objDb = new PDO('mysql:host=localhost;dbname=isport', 'root', '');
            $objDb->exec('SET CHARACTER SET utf8');

            $sql = "SELECT *
            FROM `area`
            WHERE `city_id` = ?";
            $statement = $objDb->prepare($sql);
            $statement->execute(array($value));
            $list = $statement->fetchAll(PDO::FETCH_ASSOC);

            if (!empty($list)) {
                $out = array('<option value="">Odaberi</option>');

                foreach($list as $row) {
                    $out[] = '<option value="'.$row['area_id'].'">'.$row['area_name'].'</option>';
                }

                echo json_encode(array('error' => false, 'list' => implode('', $out)));
            } else {
                echo json_encode(array('error' => true));
            }
        } catch(PDOException $e) {
            echo json_encode(array('error' => true));
        }
    } else {
        echo json_encode(array('error' => true));
    }
}

这里是我的ajax：

var formObject = {
    run : function(obj) {
        if (obj.val() === '') {
            obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
        } else {
            var id = obj.attr('id');
            var v = obj.val();
            jQuery.getJSON(SITE +'users/update_list', { id : id, value : v }, function(data) {
                if (!data.error) {
                    obj.next('.update').html(data.list).removeAttr('disabled');
                    return;
                } else {
                    obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
                }
            });
        }
    }
};
$(function() {
    $('.update').live('change', function() {
        formObject.run($(this));
    });
});

Answer 1

您的问题是使用jQuery next函数

给定一个表示一组DOM元素的jQuery对象，.next（）方法允许我们在DOM树中搜索这些元素的紧随其后的兄弟，并从匹配元素构造一个新的jQuery对象。

你的选择框不在同一个集合中，所以下一个是返回未定义的，没有任何东西得到更新。如果您只需要为此特定位置使用此代码一次，则可以向第二个选择器添加另一个类或ID以指定它。

var formObject = {
 run : function(obj) {
    if (obj.val() === '') {
        obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
    } else {
        var id = obj.attr('id');
        var v = obj.val();
        jQuery.getJSON(SITE +'users/update_list', { id : id, value : v }, function(data) {
            if(!data.error) {
                $('#secondSelect').html(data.list).removeAttr('disabled');
            } else {
                $('#secondSelect').html('<option value="">----</option>').attr('disabled', true);
            }
        });
    }
}  };

jquery动态选择列表不会在Codeigniter中自动填充

1 个答案: