2

通常の方法で nested_form_for を使用していますが、ネストされた子に動的選択メニューを追加したいと考えています。

次のコーヒースクリプトがあります（「dynamic-select-menus」railscastから適応）

jQuery ->
  $( ".controls-row" ).each ->
    $(this).bind "change", ->
      type = $('#expense_type :selected').text()
      if (type == "miles")
        $('#amount_currency').hide()
        $('#km_traveled').show()
      else 
        $('#amount_currency').show()
        $('#km_traveled').hide()

このコードの問題は、最初のネストされた要素でしか機能しないことです。各要素に一意の ID を追加しようとしましたが、それは既存の要素に対してのみ機能します。新しい要素はすべて「blueprint」要素のクローンであり、すべて同じ ID を持ちます。

ネストされたフォーム内に動的選択メニューを実装するより良い方法はありますか?

4

2 に答える 2

0

正規表現を使用して、'blueprints' id を一意のものに変更してください。

たとえば、パーシャルをロードしている場合、Javascript の置換を使用してデフォルト ID を変更できます。

于 2012-11-13T06:11:32.453 に答える
0

私はこのコードでそれを解決しました：

jQuery ->
  $(document).on "nested:fieldAdded", (event) ->
    $( ".controls-row" ).each ->
        $(this).find('#expense_type').bind "change", ->
            type = $(this).parent().find('#expense_type :selected').text()
            if (type == "km")
                $(this).parent().find('#payment_method').addClass('hidden').hide()              
                $(this).parent().find('#amount_in_currency').addClass('hidden').hide()
                $(this).parent().find('#amount_currency').addClass('hidden').hide()
                $(this).parent().find('#km_traveled').removeClass('hidden').show()
            else 
                 $(this).parent().find('#payment_method').removeClass('hidden').show()
                 $(this).parent().find('#amount_currency').removeClass('hidden').show()
                 $(this).parent().find('#amount_in_currency').removeClass('hidden').show()
                 $(this).parent().find('#km_traveled').addClass('hidden').hide()
        $(this).find('#expense_type').trigger('change')

  $(document).trigger("nested:fieldAdded")
于 2012-11-16T19:30:00.977 に答える