Question

我有这个使用JQuery生成的下拉（选择）菜单，动态地使用来自PHP脚本的JSON。请参阅组件标签下的附件。 “选择”菜单包含组件名称和组件ID（值）。 example

我希望“on change”事件，使用JQuery，用相应的值填充以下字段Code，Category和UOM。

我的JSON对象检索所需的所有内容（我设法通过JQuery自动完成实现此目的）。

例如

[{"id":"4","component":"Component 1","code":"COMP1","uom":"kilo","category":"Flour"}...]

这是我生成“选择”菜单的代码，其中包含来自上述JSON的选项。

$.getJSON("<?php echo site_url('products/dropdown/no'); ?>", function(result) {
            var optionsValues = '<select>';
            optionsValues += '<option value="">' + '--' + '</option>';
            $.each(result, function() {
            optionsValues += '<option value="' + this.id + '">' + this.component + '</option>';
            });
            optionsValues += '</select>';
            var options = $("select[name=component]");
            options.replaceWith(optionsValues);  
        });

它位于$（文件）.ready。

中

因此，我需要函数或某些东西，只要“select”菜单发生变化，它就会用相应的值填充上述字段。

非常感谢你。

Answer 1

$('select').change(function(){
   //Populate other fields
   //$.getJSON()
   //$('input.code').val(response.code)
   //etc...
});

或者，如果在页面加载后生成了select元素，则可以使用：

$('select').live('change', function(){
   //Populate other fields
});

Answer 2

$("#select").change(function(){


});

Answer 3

这就是我的工作方式：

填充select元素，并将结果存储在JSONObject变量中：

$.getJSON("http://localhost/ci/index.php/products/dropdown/no", function(result) {
    var optionsValues = "<select id='component'>";
    JSONObject = result;
    optionsValues += '<option value="">' + '--' + '</option>';
    $.each(result, function() {
            optionsValues += '<option value="' + this.id + '">' + this.prodname + '</option>';
    });
    optionsValues += '</select>';
    var options = $("select#component");
    options.replaceWith(optionsValues);  
});

当用户更改选择菜单中的值时：

$("select#component").live('change',function() {
            if(this.selectedIndex == '')
            {
                $("input#code").val('');  
                $("input#category").val('');  
                $("input#uom").val('');  
                return false;   
            }
          $("input#code").val(JSONObject[this.selectedIndex-1].code);  
          $("input#category").val(JSONObject[this.selectedIndex-1].pcname);  
          $("input#uom").val(JSONObject[this.selectedIndex-1].uname);
        });

更改时的JQuery动态下拉菜单会填充其他字段

3 个答案: