创建自定义选定列表答案

【问题标题】：Create a custom selected list创建自定义选定列表
【发布时间】：2014-12-10 14:54:57
【问题描述】：

我在数据库中添加了一些记录，但我不喜欢我所做的方式，我想为用户提供一些更容易和更好的方式。

我所做的是：http://i.imgur.com/AYrPyCn.jpg

而我想要的是：http://i.imgur.com/aKNBTtO.jpg

好吧，我想我知道如何创建 div，从数据库和水平滚动条中获取所有图像，但我不知道当我选择图像时，图像中的 id 将出现在我创建的输入中。

需要帮助。

我所拥有的代码：

<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');
});

【问题讨论】：

看到你发布的图片，你会从数据库中得到多张图片，当用户点击一个特定的图片时你想得到它的id？？
是的，这就是我想要的，真正的主要只是选择图像，然后它会自动将 id 写入数据库，但我也可以这样做，并且在按下图像时更容易，它会输入 id从输入框中的图像及其进入数据库的那个人
您可以使用Shai发布的解决方案。

标签： javascript php mysql select

【解决方案1】：

您可以使用 jQuery 幻灯片插件，例如 jcarousel 或 jssor。只需在“jQuery 幻灯片”或“jQuery 轮播”上进行谷歌搜索。

我推荐你使用 jcarousel。

阿纳斯

【讨论】：

好的，我用不上，但我的主要功能是在按下时从图像中获取 id，可能一个 js 会使其工作但不知道。
你可以把标签放到" "中，那么href属性就会包含一个你想要调用的动作的url

【解决方案2】：

由于您不希望它再看起来像下拉列表，请将下拉列表替换为隐藏字段，该字段将保存他们选择的项目的 ID：
```
<input type="hidden" name="id_artigo" />
```
（为了测试，您可以改用type="text"）

给你的每张图片一个data-id-artigo属性：

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

当点击图片时，更新隐藏 ID 的值：

$('.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
});

提交表单时，id_artigo 将等于所选项目，就像以前一样。

【讨论】：

它工作得很好，只有一个你写 artigo_id 和它的 id_artigo 的秘诀：p 谢谢 ;)
@luckr 已修复，很高兴我能提供帮助。

【解决方案3】：

我现在看到您只想选择 1 张图片，此答案用于选择多张图片。（未测试，可能会有一些错误）

    <style>

.img_holder
{
    height:100px;
    clear:both;
}

.floating_img
{
    float:left;
    width:100px;
    height:100px;
}
.img_selected
{
  border:1px solid black;
}

</style>

<div class="img_holder">
<?php 

$img_id_arr = array();

do {  

$selected = true; //<--implement if they are selected

$selected_class = '';
if($selected)
    $img_id_arr[] = $row_artigos['id_artigo'];
    $selected_class = ' img_selected';
}

?>
<div class="floating_img<?php echo $selected_class; ?>" onclick="toggle_img(<?php echo $row_artigos['id_artigo']; ?>);"><img src="images/artigos/<?php echo $row_artigos['id_artigo']; ?>.png" id="main" /></div>
<?php
} while ($row_artigos = mysql_fetch_assoc($artigos));
?>
<input typ="hidden" id="my_selected_images" name="my_selected_images" value="<?php echo implode(';',$img_id_arr); ?>">

<script>

function toggle_img(img_id)
{
    var selected_imgs = $('#my_selected_images').value;
    var img_arr = selected_imgs.split(";");
    var found = false;
    var new_arr = [];
    for (i = 0; i < img_arr.length; i++) { 
        if(img_id == img_arr[i])
        {
            found = true;
            //deselect img
        }
        else{
            //leave other item untouched
            new_arr.push(img_arr[i]);
        }
    }

    if(!found)
    {
        new_arr.push(img_id);
        //select img
    }

    $('#my_selected_images').value = new_arr.join(';');

}
</script>
</div>

【讨论】：