luckr luckr - 6 months ago 10
MySQL Question

Create a custom selected list

Well im adding to database some records but i dont like the way i did and wanted to make something way easier for the user and better.

What i did was: http://i.imgur.com/AYrPyCn.jpg

And what i want is: http://i.imgur.com/aKNBTtO.jpg

Well i guess i know how to create the divs geting all the images from database and the horizontal scroll bar but what i dont know is when i select the image that id from image will appear on the input create by me.

Help needed.

Code from what i have:

<select name="id_artigo" id="attribute119">
<?php
do {
?>
<option value="<?php echo $row_artigos['id_artigo']?>" ><?php echo $row_artigos['id_artigo']?></option>
<?php
} while ($row_artigos = mysql_fetch_assoc($artigos));
?>
</select>

<div id="editimg"><p><img src="images/artigos/1.png" id="main" /></p></div>


Js:

$('#attribute119').change(function () {
$('#main').attr('src', 'images/artigos/' + $('#attribute119 :selected').text() + '.png');
});

Answer
  1. Since you don't want it to look like a drop-down any more, replace the drop-down with a hidden field, which will hold the ID of the item they select:

    <input type="hidden" name="id_artigo" />
    

    (for testing you could use type="text" instead)

  2. Give each of your images a data-id-artigo attribute:

    <img class="artigo_img" src="images/artigos/1.png" data-id-artigo="1">
    
  3. When an image is clicked, update the hidden ID's value:

    $('.artigo_img').on('click', function() {
        var idArtigo = $(this).data('idArtigo'); // get the artigo ID from the `data-` attribute
        $('[name="id_artigo"]').val(idArtigo);   // update the value of the hidden field
    });
    

When the form is submitted, id_artigo will be equal to the selected item, just like before.