luckr luckr - 2 years ago 82
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:

And what i want is:

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">
do {
<option value="<?php echo $row_artigos['id_artigo']?>" ><?php echo $row_artigos['id_artigo']?></option>
} while ($row_artigos = mysql_fetch_assoc($artigos));

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


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

Answer Source
  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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download