Intento agregar nuevos "elementos" a un <select> dado usando jQuery. Si se marca una de las dos posibilidades (Países), el "cuadro de selección" a continuación debería cambiar la lista <options>.

Este es mi código:

$("input:radio[name=radio-1]").change(function() {
  //alert ($(this).val());
  if ($(this).val() == "aut") {
    for (i = 18; i < 21; i++) {
      $('#selectCosts').append($('<option>', {
        value: i,
        text: "Option " + i
      }));
    }
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="country">
  <h2>Land</h2>
  <form name="selectPowerCost">
    <fieldset>
      <div id="selectCountry" class="col col-md-12">
        <!-- Österreich -->
        <div class="radio pull-left" style="margin-top: -5px; min-width:150px;">
          <label for="radio-1">Österreich<span class="country-aut">&nbsp;</span></label>
          <input class="left-20" type="radio" name="radio-1" id="radio-1" value="aut">
        </div>
        <!-- Deutschland -->
        <div class="radio pull-left left-10" style="min-width:150px;">
          <label for="radio-2">Deutschland<span class="country-ger">&nbsp;</span></label>
          <input class="left-20" type="radio" name="radio-1" id="radio-2" value="ger">
        </div>
      </div>
    </fieldset>
  </form>

</div>
<div id="stromkostenProKW">
  <h2>Stromkosten pro KWh</h2>
  <div class="pull-left" style="margin-top: -5px">
    <form>
      <select id="selectCosts" name="selectCosts" class="selectpicker" title="Wählen Sie Ihre Stromkosten pro KWh">
									
								</select>
    </form>
  </div>
</div>

Este código no se ejecutará. ¿Por qué?

2
Thomas Weber 17 feb. 2017 a las 09:52

3 respuestas

La mejor respuesta

Creo que lo que quieres es cambiar la opción del cuadro combinado en función del botón de opción seleccionado. Lo que debe hacer es borrar primero las opciones del cuadro combinado antes de agregar nuevas opciones.

$("input:radio[name=radio-1]").change(function() {
    //alert ($(this).val());
    var val = $(this).val();
    $('#selectCosts').find('option').remove().end();
    if (val == "aut") {
        for (i = 18; i < 21; i++) {
            $('#selectCosts').append($('<option>', {
                value: i,
                text: "Option " + i
            }));
        }
    } else if(val == "ger") {
        for (var i = 1; i < 5; i++) {
            $('#selectCosts').append($('<option>', {
                value: i,
                text: "Option " + i
            }));
        }
    }
});
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
    </script>
    <div id="country">
        <h2>Land</h2>
        <form id="selectPowerCost" name="selectPowerCost">
            <fieldset>
                <div class="col col-md-12" id="selectCountry">
                    <!-- Österreich -->
                    <div class="radio pull-left" style="margin-top: -5px; min-width:150px;">
                        <label for="radio-1">Österreich<span class="country-aut">&nbsp;</span></label> <input class="left-20" id="radio-1" name="radio-1" type="radio" value="aut">
                    </div><!-- Deutschland -->
                    <div class="radio pull-left left-10" style="min-width:150px;">
                        <label for="radio-2">Deutschland<span class="country-ger">&nbsp;</span></label> <input class="left-20" id="radio-2" name="radio-1" type="radio" value="ger">
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
    <div id="stromkostenProKW">
        <h2>Stromkosten pro KWh</h2>
        <div class="pull-left" style="margin-top: -5px">
            <form>
                <select class="selectpicker" id="selectCosts" name="selectCosts" title="Wählen Sie Ihre Stromkosten pro KWh">
                </select>
            </form>
        </div>
    </div>
</body>
</html>
0
Geoman Yabes 17 feb. 2017 a las 07:24

Hola chicos / chicas / desarrollador!

Muchas gracias por su apoyo.

Resolví mi problema. Todas las sugerencias están funcionando bien.

Había incluido un "bootstrap-select.min.js" que generaba algunos conflictos y provocaba problemas. Como excluí este archivo .js, todo funciona bien.

¡Muchas gracias!

Aquí está el código que estoy usando (solo JS):

function init() {
$("input:radio[name=radio-1]").change(function() {
var val = $(this).val();
$('#selectCosts').find('option').remove().end();
if (val == "aut") {
    for (i = 16; i < 22; i++) {
        $('#selectCosts').append($('<option>', {
            value: i,
            text: "Kosten pro KWh: " + i + " ct"
        }));
    }
} else if(val == "ger") {
    for (var i = 26; i < 33; i++) {
        $('#selectCosts').append($('<option>', {
            value: i,
            text: "Kosten pro KWh: " + i + " ct"
        }));
    }
}

});

} document.addEventListener ('DOMContentLoaded', init);

0
Thomas Weber 25 feb. 2017 a las 11:51

Solo verifica si el país Austria está marcado y no si Alemania está marcado. También agregaría $("#selectCosts").empty(); antes del ciclo para vaciar los elementos dentro de la lista.

EDITAR

También podría reemplazar esta parte:

$('#selectCosts').append($('<option>', { value: i, text: "Option " + i }));

Con esta sugerencia hecha por @Taufik Nur Rahmanda:

$('#selectCosts').append('<option value="'+i+'">Option '+i+'</option>');

$("input:radio[name=radio-1]").change(function() {
  //alert ($(this).val());
  if ($(this).val() == "aut" || $(this).val() == "ger") {
    $("#selectCosts").empty();
    for (i = 18; i < 21; i++) {
      $('#selectCosts').append($('<option>', {
        value: i,
        text: "Option " + i
      }));
    }
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="country">
  <h2>Land</h2>
  <form name="selectPowerCost">
    <fieldset>
      <div id="selectCountry" class="col col-md-12">
        <!-- Österreich -->
        <div class="radio pull-left" style="margin-top: -5px; min-width:150px;">
          <label for="radio-1">Österreich<span class="country-aut">&nbsp;</span></label>
          <input class="left-20" type="radio" name="radio-1" id="radio-1" value="aut">
        </div>
        <!-- Deutschland -->
        <div class="radio pull-left left-10" style="min-width:150px;">
          <label for="radio-2">Deutschland<span class="country-ger">&nbsp;</span></label>
          <input class="left-20" type="radio" name="radio-1" id="radio-2" value="ger">
        </div>
      </div>
    </fieldset>
  </form>

</div>
<div id="stromkostenProKW">
  <h2>Stromkosten pro KWh</h2>
  <div class="pull-left" style="margin-top: -5px">
    <form>
      <select id="selectCosts" name="selectCosts" class="selectpicker" title="Wählen Sie Ihre Stromkosten pro KWh">
									
								</select>
    </form>
  </div>
</div>
0
Miles07 17 feb. 2017 a las 07:36