title: Change img src from json using jquery
body: <p>I have an JSON file with this data (ignore the content):</p>
  
  <pre><code>[{
      "autonomia_id": "01",
      "nombre": "Andalucía",
      "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Flag_of_Cambodia.svg/200px-Flag_of_Cambodia.svg.png"
  },
  {
      "autonomia_id": "02",
      "nombre": "Aragón",
      "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Flag_of_Cambodia.svg/200px-Flag_of_Cambodia.svg.png"
  },
  {
      "autonomia_id": "03",
      "nombre": "Asturias, Principado de",
      "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Flag_of_Cambodia.svg/200px-Flag_of_Cambodia.svg.png"
  }]
  </code></pre>
  
  <p>And I want to change of an img src on an html depending what you select at select.</p>
  
  <pre><code>&lt;!-- MODAL SELECCION COMUNIDAD AUTONOMA --&gt;
  &lt;div id="modal" class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;Selecciona la comunidad autónoma desde la que visitas esta web&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;select class="form-control" id="comunidades"&gt;
            &lt;option selected value="0"&gt;Selecciona una comunidad autónoma...&lt;/option&gt;
        &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn-lg btn-info" id="aceptar"&gt;Aceptar&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;!-- /MODAL SELECCION COMUNIDAD AUTONOMA/ --&gt;
  
  
  
  &lt;!-- MOSTRAR COMUNIDAD --&gt;
  &lt;div id="comunidadRepresentando" class="media"&gt;
      &lt;div class="media-left"&gt;
          &lt;img id="imgComunidad" class="media-object" src="src/imgcomunidad.png" alt="comunidad"&gt;
      &lt;/div&gt;
      &lt;div class="media-body"&gt;
          &lt;h3 id="nombreComunidad" class="media-heading"&gt;Nombre comunidad&lt;/h3&gt;
          &lt;p id="descripcionComunidad"&gt;Si quieres ver una pequeña descripción de un comunidad autónoma, selecciónala en el panel de al lado.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What can I do using jquery or pure javascript?</p>
  
  <p>I've tried once with .text() but it only shows me the name, but not the img url.</p>
  
  <p><strong>EDIT</strong>
  Adding some javascript and jquery code:</p>
  
  <p>This is putting me the "nombre" field of json correctly at #nombreComunidad</p>
  
  <pre><code>function ponerNombreComunidad() {
      $("#comunidades")
          .change(function () {
              var str = "";
              $("select option:selected").each(function () {
                  str += JSON.parse();
              });
              $("#nombreComunidad").text(str);
          })
          .trigger("change");
  }
  </code></pre>
  
  <p>But this isn't putting me the correct img src:</p>
  
  <pre><code>function cambiarImgComunidad() {
  
       $("#comunidades")
              .change(function () {
  
  
                  var str = "";
                  $("select option:selected").each(function () {
                      str += $(this).text();
                  });
                  $("#imgComunidad").attr("src", str);
              })
              .trigger("change");
      }
  </code></pre>