Question

我有一个表格来添加食谱，用户可以在同一表格中添加多个食谱成分。用户添加的每种成分都是通过ajax调用完成的，这样我就不必显示选择的成分盒。当用户用户选择一种成分时，所选成分的id存储在隐藏的输入中

  <%= builder.hidden_field :ingredient_id %></div>

当用户从列表中选择一种成分时，触发ajax调用以填充另一个选择框，该选择框根据成分显示所有份量。当我添加新食谱时，此设置非常有效。

我在编辑模式下打开现有食谱时出现问题...

我有以下html

<%= builder.hidden_field :ingredient_id %>
<%= builder.select(:serving_size_id, '') %>

jQuery代码

jQuery.fn.bindServingSizes = function(ingredientid) {
    var $this = $(this);

    $.getJSON("/serving_sizes?ingredientid=" + ingredientid, function(j) {

        var options = "<option value=''>Please select a serving size</option>";
    for (var i=0; i < j.length; i++)
      options += '<option value="' + j[i].serving_size.id + '">' + j[i].serving_size.name + '</option>';

        $this.html(options);
    });
  };

我有一个ajax调用，它在页面加载时运行，它读取隐藏输入中的值并获取服务大小并将其作为选项添加到选择框中。 我的问题：如何在选择框中选择正确的选项？我在“serving_size_id”列中有数据，但我不知道如何获取它的值，因此我可以按值设置正确的选定项目。

我希望我的解释清楚。

Answer 1

我根本不是jQuery专家，但从你的例子看，我看到你只是创建HTML来提供可用的选项。

因此，您可以将selected="selected"属性添加到与serving_size_id的值对应的选项中。使用jQuery从serving_size_id获取值可以使用：

完成

var serving_size = $("#serving_size_id").val();

此值可在您的for循环中用于“查找”所选选项。

Answer 2

使用jQuery，您可以设置选定的<option>：

$(combo).val('selectedValue'); // *

文档：http://api.jquery.com/val/#val2

_{*您的代码不允许我在示例代码中使用实名和值}

当ajax调用添加选项时，从选择框中选择一个值

2 个答案: