1

tengo el siguiente código en un form for de view:

<div class="form-group col-xs-6">
  <%= f.label :Competition_type %> <br>
  <%= f.radio_button :type_competition, :value => "regression", :checked => true, id: "type_regression" %>
  <%= f.label :type_competition, "Regression"%>
  &nbsp;
  <%= f.radio_button :type_competition, :value => "classification", id: "type_classification" %>
  <%= f.label :type_competition, "Classification"%>
</div>
<div class="form-group col-xs-6">
  <%= f.label :Performance_metric %>
  <%= f.select(:metric, options_for_select([['Mean Absolute Error'],['Root Mean Squared Error'], ['Weighted Mean Absolute Error'], ['Accuracy'],['Mean Utility']]), {}, {class: "form-control", id: "selectMetric"}) %>
</div>

Alguien me echar una mano para hacer una función JavaScript que cuando se marque el radio button "regression", en el select solo aparezcan ['Mean Absolute Error'],['Root Mean Squared Error'], ['Weighted Mean Absolute Error'], y cuando se marque el radio button "classification" solo aparezcan ['Accuracy'],['Mean Utility'].

Código generado

<div class="form-group col-xs-6">
    <label for="competition_Competition_type">Competition type</label> <br>
    <input class="my_radio" type="radio" value="regression" checked="checked" name="competition[type_competition]" id="competition_type_competition_regression" />
    <label for="competition_type_competition">Regression</label>
    &nbsp;
    <input class="my_radio" type="radio" value="classification" name="competition[type_competition]" id="competition_type_competition_classification" />
    <label for="competition_type_competition">Classification</label>
  </div>
  <div class="form-group col-xs-6">
    <label for="competition_Performance_metric">Performance metric</label>
    <select class="form-control" id="selectMetric" name="competition[metric]">
       <option value="Mean Absolute Error">Mean Absolute Error</option>
       <option value="Root Mean Squared Error">Root Mean Squared Error</option>
       <option value="Weighted Mean Absolute Error">Weighted Mean Absolute Error</option>
       <option value="Accuracy">Accuracy</option>
       <option value="Mean Utility">Mean Utility</option>
    </select>
  </div>

Se lo agradeceré enormemente, ya que estoy bastante atascado en esto, no encuentro la info suficiente y necesito continuar 😥

Muchas gracias a quien responda :)

2
  • ¿Podrías poner el código generado en lugar del código en Ruby?
    – Alvaro Montoro
    Commented el 1 jul. 2017 a las 14:09
  • Si claro, actualizo. Commented el 1 jul. 2017 a las 14:14

1 respuesta 1

1

Para lograrlo primero necesitas hacer un par de ajustes en tus radio_button:

  1. Quita la llave value (esta se asigna directamente en el segundo argumento, así que únicamente deja el valor).
  2. Agrega una clase (i.e. class) para poder identificar cuando se de clic a cualquiera de los dos radio_button.
  3. Elimina la llave id por completo (esta se genera de manera automática utilizando el nombre y el valor del elemento).

Considerando lo anterior, así deberían verse tus elementos radio_button:

<div class="form-group col-xs-6">
  <%= f.label :Competition_type %> <br>
  <%= f.radio_button :type_competition, "regression", checked: true, class: "my-radio" %>
  <%= f.label :type_competition, "Regression"%>
  &nbsp;
  <%= f.radio_button :type_competition, "classification", class: "my-radio" %>
  <%= f.label :type_competition, "Classification"%>
</div>

Y utiliza el siguiente script para actualizar las opciones del select:

<script type="text/javascript">
  $(document).ready(function() {
    $('.my-radio').change(function() {

      if($(this).val() == "regression") {
        var options = {
          'Mean Absolute Error': 'mean_absolute_error',
          'Root Mean Squared Error': 'root_mean_squared_error',
          'Weighted Mean Absolute Error': 'weighted_mean_absolute_error'
        };
      } else {
        var options = {
          'Accuracy': 'accuracy',
          'Mean Utility': 'mean_utility'
        };
      }

      $('#selectMetric').empty();
      $.each(options, function(key, value) {
        $('#selectMetric').append('<option value="' + value + '">' + key + '</option>');
      });
    });
  });
</script>

El script hace lo siguiente:

  • Detecta cuando el usuario da clic a cualquiera de los dos radio_button y ejecuta la función.
  • Valida si radio_button al que dio clic tiene como valor 'regression', o tiene otro valor, y asigna las correspondientes (en forma de hash) en la variable opciones.
  • Elimina las opciones del elemento select.
  • Itera la variable opciones para agregar cada opción en el elemento select.
6
  • Muchas gracias Gerry por tu grandísima explicación. Pero no me funciona y no encuentro explicación por qué. El código javascript puede ir en mi view perfectamente no? Al final del código Commented el 1 jul. 2017 a las 14:04
  • @JorgeVelaPlaza Sí, el script ponlo en la misma vista. ¿Te muestra algún error en la consola del navegador?
    – Gerry
    Commented el 1 jul. 2017 a las 14:06
  • Nada... El f.select debe seguir igual que en mi código no? o lo debo dejar vacío Commented el 1 jul. 2017 a las 14:10
  • @JorgeVelaPlaza El select no necesita cambiar. ¿Tampoco te muestra un error en la consola del servidor?
    – Gerry
    Commented el 1 jul. 2017 a las 14:12
  • Nada, y no sé porqué....todo parece estar correcto. El select ni se inmuta cuando marco un radio button, siguen las mismas 5 opciones Commented el 1 jul. 2017 a las 14:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.