Add option to a select from a json

Question

Add option to a select from a json

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm trying to add more <option> to <select> from a json file.

This is the form where I want to add the <option> :

<div class="input-field col s12" id="materias">
                <select id="recargado" name="materias">
                    <option id="disabled" value="" disabled selected>Elige la materia a consultar</option>
                    <?php require_once("materias.php"); ?>
                </select>
                <label>Materia que deseas consultar</label>
            </div>

I have the following JavaScript code:

$("#carrera").change(function () {
let carrera = document.getElementById("carrera").value;

$.get("materias.php", { idcarrera: carrera })
  .done(function (json_data) {
    json_data = JSON.parse(json_data);
    var options = '';
    $.each(json_data, function (i) {
      console.log(json_data[i].clave);
      $('#disabled').append($('<option>').text(json_data[i].nombre).attr('value', json_data[i].clave));
    });
  });
});

The problem is, I can not add the <option> . Just as I have the code, it gives me all the names of the subjects, in the same <option> . If I change the $('#disabled') by $('#recargado') , it does not add anything to me. However, if I put $(#materias) , it gives me the result of json_data[i].nombre as loose options, without any select. Can someone help me?

javascript json

asked by Nohemi 11.09.2018 в 23:58

source

2 answers

how to save several checkbox options in the same field of the bd cancel styles (css) in Child Theme

score 0 · Answer 1

I made several changes to your code. It's a bit confusing because HTML elements are missing. Also it seems that you want to add more options to change in the same select, but the idea would be something like this:

$("#recargado").change(function () {
let carrera = document.getElementById("carrera").value;

$.get("https://api.myjson.com/bins/1ah6wg", { idcarrera: carrera })
  .done(function (json_data) {        
    var options = '';
    $.each(json_data, function (i, json) {      
      $("#recargado").append('<option value="' + json.clave + '">' + json.nombre + '</option>');
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-field col s12" id="materias">
                <select id="recargado" name="materias">
                    <option value="" selected></option>
                    <option value="">Elige la materia a consultar</option>
                    <?php require_once("materias.php"); ?>
                </select>
                <label>Materia que deseas consultar</label>
                <input id="carrera" value=1>
            </div>

score 0 · Answer 2

I made a small change in .each() , where I passed the array of subjects that you probably use by iterating it to get the key, plus the .append() I put it in select and not in option

//Json de ejemplo
json_str='{"Materias":[
	{"Clave":"Materia1"},
  {"Clave":"Materia2"},
  {"Clave":"Materia3"}
]}';
json_data = JSON.parse(json_str);
var options = '';
$(json_data["Materias"]).each(function(){
  $('#recargado').append($('<option>').text(this.Clave).attr('value', this.Clave));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field col s12" id="materias">
                <select id="recargado" name="materias">
                    <option id="disabled" value="" disabled selected>Elige la materia a consultar</option>
                    <?php require_once("materias.php"); ?>
                </select>
                <label>Materia que deseas consultar</label>
            </div>