javascript - Create a custom selected list -

javascript - Create a custom selected list -

well im adding database records dont way did , wanted create way easier user , better.

what did was: http://i.imgur.com/ayrpycn.jpg

and want is: http://i.imgur.com/aknbtto.jpg

well guess know how create divs geting images database , horizontal scroll bar dont know when select image id image appear on input create me.

help needed.

code have:

<select name="id_artigo" id="attribute119"> <?php { ?> <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'); });

since don't want drop-down more, replace drop-down hidden field, hold id of item select:

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

(for testing utilize type="text" instead)

give each of images data-id-artigo attribute:

<img class="artigo_img" src="images/artigos/1.png" data-id-artigo="1">

when image clicked, update hidden id's value:

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

when form submitted, id_artigo equal selected item, before.

javascript php mysql select