Выбор значения из поля выбора при добавлении опций с помощью вызова ajax

Question

У меня есть форма для добавления рецептов, в той же форме пользователь может добавить несколько ингредиентов рецепта. Каждый добавляемый пользователем компонент выполняется с помощью ajax-вызова, поэтому мне не нужно отображать блок выбора ингредиентов. Когда пользователь выбирает ингредиент, идентификатор выбранного ингредиента сохраняется в скрытом вводе

  <%= 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, который запускается при загрузке страницы, он считывает значение из скрытого ввода, получает размеры обслуживания и добавляет его в качестве параметров в поле выбора. Мой вопрос : Как выбрать правильный вариант в поле выбора? У меня есть данные в столбце "serve_size_id", , но я не знаю, как получить их значение, чтобы я мог установить правильный выбранный элемент по значению.

Надеюсь, я достаточно ясен в своих объяснениях.

Answer 1

Я вообще не эксперт по jQuery, но, судя по вашему примеру, я вижу, что вы просто создаете HTML для предоставления доступных опций.

Поэтому вы можете добавить selected="selected" атрибут для опции, которая соответствует значению serving_size_id.Получить значение из serving_size_id с помощью jQuery можно с помощью:

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

Это значение может быть использовано в цикле for для «поиска» выбранной опции.

Answer 2

Используя jQuery, вы можете установить выбранное <option> с помощью:

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

Документация: http://api.jquery.com/val/#val2

_{* ваш код не позволил мне использовать реальные имена и значения в примере кода}