How to create a new img tag with jQuery?

Question

How to create a new img tag with jQuery?

Navigation

#1 by (3 votes)

2

I would like to change c:\imagem.jpg according to what was selected in <option id="selecao" value="01">c:\imagem.jpg</option> . Here is the code:

<DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script><scripttype="text/javascript">
        $(function(){
        $("#btnTeste").click(function(){
          var select = document.getElementById("selecao");
          alert(select.innerText);
          var img = $('<img />', { id: 'Myid', src: 'c:\imagem.jpg' , alt:'MyAlt'}) .appendTo($('#divPrincipal'));
        });
    })
    </script>
</head>
<body>
    <div id="divPrincipal">
    </div>
    <select name="select-native-fc" >
        <option id="selecao" value="01">c:\imagem.jpg</option>
    </select>
    <button id="btnTeste">Testar</button>
</body>
</html>

This is the code for Views:

@model ProjetoDelphiMobile.Models.cliente

@{
    ViewBag.Title = "";
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script><script>$(function(){$("#btnTeste").click(function () {
            var src = $('select[name="select-native-fc"]').text();
            alert(src);
            var img = $('<img />', { id: 'Myid', src: src, alt: 'MyAlt' }).appendTo($('#divPrincipal'));
        });
    })
</script>
<form>
    <fieldset data-role="controlgroup">
  @*      <div >
            <img id="foto" src="@Url.Action("Thumbnail", "ConsultaCliente", new {caminhofoto = "caminho", largura = 100, altura = 100 })" alt="thumbnail" />
        </div>*@
            <div id="divPrincipal">
            </div>
               <label>Foto:</label>
               <div  name="select-native-fc" >
                    @Html.DropDownList("idFoto", String.Empty) 
                </div>
              <button id="btnTeste">Testar</button>
        <ul data-role="listview" data-inset="true" data-divider-theme="e">
            <li><a href="/ConsultaCliente">Retornar para consulta</a></li>
        </ul>
    </fieldset>
</form>

This is the Controller code:

    public ActionResult AtualizaCliente(int id)
    {
        ViewBag.idFoto = new SelectList(dao.fotos, "idFoto", "Foto");
        ViewBag.idInformacao = new SelectList(dao.informacoes, "idInformacao", "titulo");
        return View(dao.cliente.Find(id));
    }

javascript jquery

asked by anonymous 15.04.2015 / 04:56

1 answer

Problem with mysql connection in C # Handle 404 error without using try / catch

score 3 · Answer 1

If you want to create a new image using the information of select you can do so using the .text() method that gives you the text of the selec:

$("#btnTeste").click(function(){
      var src = $('[name="select-native-fc"] option:selected').text();
      alert(src);
      var img = $('<img />', { id: 'Myid', src: src , alt:'MyAlt'}) .appendTo($('#divPrincipal'));
});

I suggest that instead of giving ID's to every option you give the ID to the select itself, since IDs must be unique.