Перемножение полей
 

Есть два металла золото и серебро. В зависимости от того, какое значение выбрано в поле металл - отображается второй <select>, у которого <option value="цена">проба</option>.

Т.е. надо отобразить список проб в зависимости от выбранного металла и умножить цену конкретной пробы на вес (результат вывести).

Как реализовать перемножение именно с тем селектом, который отображается в зависимости от выбранного металла?

Сделал два селекта с пробами на золото и серебро и показывал один из них в зависимости от выбранного металла, но не смог подцепиться уже к отображаемому списку с пробами -_-

PS Если напишете более-менее рабочий вариант кода - отправьте в лс куда и сколько "спасибо" выразить - я давно не писал на js и давно не спал. буду благодарен за помощь.

<form class="uk-form">
    <fieldset>
        {# Metal #}
        <select name="metal" class="uk-form-large uk-width-1-1 uk-margin-bottom">
          <option value="gold">{{ 'METAL.GOLD'|t }}</option>
          <option value="silver">{{ 'METAL.SILVER'|t }}</option>
        </select>

        {# Gold #}
        <select name="gold" class="uk-form-large uk-width-1-1 uk-margin-bottom">
            {% for select in theme_config.gold %}
              <option value="{{ select.price }}">{{ select.sample }}</option>
            {% endfor %}
        </select>

        {# Silver #}
        <select name="silver" class="uk-form-large uk-width-1-1 uk-margin-bottom">
            {% for select in theme_config.silver %}
              <option value="{{ select.price }}">{{ select.sample }}</option>
            {% endfor %}
        </select>

        <input name="weight" type="text" class="uk-form-large uk-width-1-1 uk-margin-bottom" value="1" placeholder="Вес">

        <a name="send" class="uk-width-1-1 uk-button uk-button-large uk-button-primary">Рассчитать</a>

        <p>Цена за грамм <span class="value">___</span> руб.</p>
        <p>Сумма на руки <span class="result">___</span> руб.</p>
    </fieldset>
</form>

<script>
  $(document).ready(function(){
    var gold = $("select[name=gold]").val() * 1;
    var silver = $("select[name=silver]").val() * 1;
    var weight = $("input[name=weight]").val() * 1;

    // Показываем список проб и цену за грамм при загрузке
    if ($("select[name=metal]").val() == "gold") {
      $('select[name=silver]').addClass('uk-hidden');

      $("span.value").text(gold);
      $("span.result").text(gold * weight);
    }
    else {
      $('select[name=gold]').addClass('uk-hidden');

      $("span.value").text(silver);
      $("span.result").text(silver * weight);
    }
  });

  $(function () {
    var gold = $("select[name=gold]").val() * 1;
    var silver = $("select[name=silver]").val() * 1;
    var weight = $("input[name=weight]").val() * 1;

    // Отображаем список проб
    $("select[name=metal]").change(function() {
      if ($(this).val() == "gold") {
        $('select[name=silver]').addClass('uk-hidden');
        $('select[name=gold]').removeClass('uk-hidden');
      }
      else {
        $('select[name=gold]').addClass('uk-hidden');
        $('select[name=silver]').removeClass('uk-hidden');
      }
    })

    // Расчитываем
    $("a[name=send]").click(function() {
      if ($('select[name=silver]').hasClass("uk-hidden")) {
        var result = gold * weight;
      } else {
        var result = silver * weight;
      }

      $("span.value").text(gold);
      $("span.result").text(result);
    });
  });
</script>

При загрузке страницы срабатывает. Меняется поле с пробами в зависимости от выбранного металла (select с пробами другого металла скрывается классом .uk-hidden).

Расчет стоимости по событию click не срабатывает (https://jsfiddle.net/xw3tuchp/).

Разобрался. Не актуально.