mount select in javascript with variable php

Question

mount select in javascript with variable php

Navigation

#1 by (1 votes)

1

I'm building a script that dynamically receives a variable array from php, this variable I give json_encode, and now how do I mount my select with this information? script below:

     <?php 
     $opts = array();
     foreach($amenities as $amenitie){
     $opts[$amenitie->id] = $amenitie->name; 
      }
     ?>

    <html>
    <head>
    <meta charset="utf-8">
    <title>Detalhes ao redor</title>
    <!--Le CSS
    ==========================================================-->
    <link href="<?php echo base_url(); ?  >includes/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script    src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

      <!--Le JavaScript
      ==========================================================-->
      <script src="<?php echo base_url(); ?  >includes/bootstrap/js/bootstrap.js"></script>             
      <script>
        var _detalhes = new Array;
        var _opts = <?php echo json_encode($opts)?>;            
        function AddFoto(){
            var _i = _detalhes.length;
            var _x = _i + 1;
            var _html = '<div class="input file"><label for="amenitie_    '+_i+'">Detalhe '+_x+'</label><select name="amenitie_'+_x+'"      id="amenitie_'+_x+'" class="form-control"></select></div>';
            _detalhes[_i] = _html;                
            $("#select-form").append(_html);
            var select = document.getElementById('amenitie_'+_x+'');
            montarSelect(select, _opts);
            }

            function montarSelect(select, json) {
            if (typeof json == 'string') json = JSON.parse(json);
            Object.keys(json).forEach(function (chave) {
                var option = document.createElement('option');
                option.value = chave;
                option.innerHTML = json[chave];
                select.appendChild(option);
             });
             }

         </script>
         </head>
        <body>       
        <?= $menu ?>
       <div class="container">
        <button class="btn btn-default" id="show-button"   onclick="AddFoto()">Inserir Novo</button>
         <div class="form-select" id="select-form"></div>
     </div>
     <?= $footer ?>
     </body>

php jquery

asked by anonymous 25.10.2015 / 15:32

1 answer

Entity Framework + Fluent API + Web API? How to avoid duplication of controllers / responsibility in modern applications?

score 1 · Accepted Answer

To mount a select with JSON in the format {chave: valor} there are some decisions you have to make.

Considering that HTML has at least 2 points where you can put content:

<option value="ponto_1">ponto_2</option>

I'll give an example where the key goes to ponto_1 and value to ponto_2 .

function montarSelect(select, json) {
    if (typeof json == 'string') json = JSON.parse(json);
    Object.keys(json).forEach(function (chave) {
        var option = document.createElement('option');
        option.value = chave;
        option.innerHTML = json[chave];
        select.appendChild(option);
    });
}

You basically go through all the keys of this object with forEach and each one creates a new option that receives value and innerHTML and then is inserted into select.

The result would look like this: link