respuesta PHP y AJAX

[siguiendolaluna]

tengo este codigo es la consulta php que regresa los datos al ajax del form HTML

Código PHP:

$categoria = $_POST["cate"];
    $registro = mysql_query("SELECT productos.id_producto, productos.nombre
                               FROM productos
                               WHERE id_categoria = ". $categoria ." ");
               $product= array();
                while($reg=mysql_fetch_array($registro))
                {
                     $id = $reg['id_producto'];
                     $product[$id] = $reg['nombre'];
                     
                }
    $productos = $product[$id];
    die(json_encode($productos, JSON_FORCE_OBJECT));
 

form

Código HTML:

<form name="form1" method="post" action="">
       <table width="70%" border="0" cellspacing="0" cellpadding="0" align="center" style="background-color:#FFC">
           <tr>
            <td><label for="categoria">Categoria:</label></td>
            <td>
            <select name="categoria" id="categoria" onChange="buscar();">
                <?php $registro = mysql_query("SELECT * FROM categorias");
               while($reg=mysql_fetch_array($registro))
               {
                   echo '<option value="' . $reg['id_categoria']. '">' . $reg['categoria']. "</option>";
                }
                ?></select><br /><br /></td>
          </tr>
         
          <tr>
            <td><label for="producto">Producto:</label><br /><br /></td>
            <td>
            <select name="producto" id="producto"></select></td>
          </tr>      
           
          </table>
          </form>
        </div>
    </div>
    <script type="text/javascript" src="include/jquery.js"></script>
    <script type="text/javascript" src="include/jquery.min.js"></script>
    <script type="text/javascript">
    function buscar()
    {
        var categoria = $("#categoria").val();
        $.ajax({
            type:"POST",
            url:"code_option.php",
            data: "cate="+ categoria,
            dataType:"json",
            success: function(data){
                $("#producto").empty();
                for(var i=0; i < 20 ; i++)
                {
                    $("#producto").append('<option value="'+i+'">'+data[i]+'</option>');
                }
            },
            error: function(jqXHR,textStatus,errorThrown){
                alert(textStatus);
            }
        });
    }
      </script>
    </body>
    </html>
 

en esta funcion que esta el form me regresa mal la informacion en el option
el registro es "BOLSA 45" y en el option de $("#producto").append('<option value="'+i+'">'+data[i]+'</option>');
me regresa la palabra distribuida por letras
osea
option1 B
option2 O
option3 L

y asi, no se como hacer para que de la consulta PHP el ajax me regrese todos los productos segun la categoria en que me equivoco