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

我有用JQuery生成的下拉（选择）菜单，动态使用来自PHP脚本的JSON。请参阅附件中的图片，在组件标签下。 “选择”菜单包含组件名称和组件ID（值）。 example 更改JQuery动态下拉菜单填充其他字段

我想要使用JQuery的“更改”事件来填充以下字段代码，类别和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); 
     });

它位于$（document）.ready中。

所以，我需要功能或者什么东西，只要在“选择”菜单发生变化时，它就会用相应的值填充所提到的字段。

非常感谢您提前。

来源

2011-04-20 Marko Aleksić

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

或者，如果你生成的选择元素在页面加载后，您可以使用：

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

来源

2011-04-20 12:38:24 Calum

如何指的是与所选择的下拉值对应的那些特定的值（代码，类别，计量单位）？ – 2011-04-21 13:00:37

在你的getJSON函数中，你可以使用result.code，result.category等获取你的php脚本中的值，然后你必须使用$（'input [name = code]'）.val（result.code）或者无论什么领域被称为添加它。 – Calum 2011-04-21 20:56:45

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


});

来源

2011-04-20 12:37:37

这是怎么回事我做的工作：

填充选择元素，并将结果存储在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); 
     });

来源

2011-04-23 09:38:45

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

回答

相关问题