Question

嘿，我在网上发现了这个功能，如果我单独使用它，它可以正常工作，但我的文档的其余部分都有jQuery函数，我也希望这个函数也适用于jQuery。

混合原型和jQuery时我也遇到了一些错误。

这是功能：

function updateCommodityProduct(e) {
    // The response comes back as a bunch-o-JSON
    var objects = eval("(" + e.responseText + ")")  // evaluate JSON

    if (objects) {
        var rselect = document.getElementById('commodityProduct')

        // Clear all previous options
        var l = rselect.length

        while (l > 0) {
            l--
            rselect.remove(l)
        }

        // Rebuild the select
        for (var i=0; i < objects.length; i++) {
            var object = objects[i]
            var opt = document.createElement('option');
            opt.text = object.enDescription
            opt.value = object.productCode
            try {
                rselect.add(opt, null) // standards compliant; doesn't work in IE
            }
            catch(ex) {
                rselect.add(opt) // IE only
            }
        }
    }
}

提前致谢!!

更新：

以下是使用该功能的地方：

我正在使用它与Grails，但g：select几乎与select相同我也可以使用select，如果这也是一个选项。

（以下是关于g的一些信息：选择和属性，非常简单，http://www.grails.org/doc/1.0.x/ref/Tags/select.html）

<td valign="top"><form id="selectForm">
<b>GROUP:</b>
<g:select id="productGroups" optionKey="groupCode" name="getAllProductGroups2" from="${getAllProductGroups}" optionValue="enDescription" onchange="${remoteFunction(controller:'comodity', action:'ajaxGetCommodities', params:'\'groupCode=\' + escape(this.value) ', onComplete:'updateCommodityProduct(e)')}" style="width:220px" />
</br>
<b>COMMODITY:</b>
<g:select name="commodityProduct" id="commodityProduct"  style="width:220px">
</g:select></form></td>

再次感谢!!

Answer 1

这在jQuery中有点短，就像这样：

function updateCommodityProduct(objects) {
  if (!objects) return;
  var select = $('#commodityProduct').empty();

  $.each(objects, function(i, o) {
    $("<option />", { text: o.enDescription, value: o.productCode })
      .appendTo(select);
  });
}

请注意，此版本已经获取了对象，只需将$.ajax() dataType更改为"json"，此时它已经是一个对象。您可以直接将其用作success回调，例如：

$.ajax({
  //....options...
  success: updateCommodityProduct
});

Answer 2

此代码的一部分没有意义。它是从原始版本修改过来的，或者从一开始就是错误的。

无论如何，我猜测代码的意图，但尝试一下：

function updateCommodityProduct(e) {
    // The response comes back as a bunch-o-JSON
    var objects = eval("(" + e.responseText + ")")  // evaluate JSON

    if (objects) {
        var $rselect = $('#commodityProduct').empty();
        $.each( objects, function(i,val) {
            $('<option/>', {text:val.enDescription,value:val.productCode})
                          .appendTo($rselect);
        });
    }
}

修改

如果productGroups是应该触发事件的<select>，那么您可以执行以下操作：

// run the code on DOM ready $(function() { // attach a change() handler to the productGroups element $('#productGroups').change(function() { // Retrieve the selected value of the <select> element var value = $(this).val(); // You'll need to send the selected value to the server. $.ajax({ url: '/path/to/resource', // your server url here dataType: 'json', // anticipate JSON response from server success: function( resp ) { // trigger an alert() to show that response was received alert( resp ); if (resp) { var $rselect = $('#commodityProduct').empty(); $.each( resp, function(i,val) { $('<option/>', {text:val.enDescription, value:val.productCode}) .appendTo($rselect); }); } } }); }); });

将函数从原型更改为jQuery

2 个答案: