Question

我有两个选择列表：

<select id="boy" class="list">
    <option value="">Boy picture...</option>
    <option value="1" >Picture 1</option>
    <option value="2" >Picture 2</option>
    <option value="3" >Picture 3</option>
    <option value="4" >Picture 4</option>
</select>
<select id="girl" class="list">
    <option value="">Girl picture.... </option>
    <option value="a">Picture 1</option>
    <option value="b">Picture 2</option>
    <option value="c">Picture 3</option>
    <option value="d">Picture 4</option>
</select>

并且想要在单独的div标签中加载带有选择列表的图片。当我点击Picture 1列表中的boy时，我想加载男孩图片，当Picture 1列表中的girl上的clik我要加载女孩图片时... 并且，当加载Picture 1时按下Next按钮图片2加载......等等。

我不知道该怎么做。

我的CODE

Answer 1

如果我理解正确，您想要将图像附加到选择的每个选项，而不是在选择该选项时显示图像。

为此，我在选项myImg上设置了一个自定义属性，其中包含男孩和女孩的图像值，我使用随机图像（需要一段时间才能获得它们）。

<select id="boy" class="list">
    <option value="">Boy picture...</option>
    <option value="1" myImg="http://randomimage.setgetgo.com/get.php?height=50&width=50">Picture 1</option>
    <option value="2"  myImg="http://randomimage.setgetgo.com/get.php?height=50&width=50">Picture 2</option>
    <option value="3"  myImg="http://randomimage.setgetgo.com/get.php?height=50&width=50">Picture 3</option>
    <option value="4"  myImg="http://randomimage.setgetgo.com/get.php?height=50&width=50">Picture 4</option>
</select>

在change event中，我使用$('option:selected', this).attr('myImg')获取属性并设置图片div的css background-image：

$('#boy').on('change', function () {
    $('select').removeClass('activeList');
    $(this).addClass('activeList');
    $(".picture").css('background-image', 'url(' + $('option:selected', this).attr('myImg') + ')');
});
$('#girl').on('change', function () {
    $('select').removeClass('activeList');
    $(this).addClass('activeList');
    $(".picture").css('background-image', 'url(' + $('option:selected', this).attr('myImg') + ')');
});

这是一个工作小提琴：http://jsfiddle.net/IrvinDominin/LT8zc/

如果我不理解我喜欢的问题，那么： - ）

修改

如果你想这样设置不重复的图像设置如下：

$(".picture").css({
    'background-image': 'url(' + $('option:selected', this).attr('myImg') + ')',
    'background-repeat': 'no-repeat'
});

或将其定义为常规css规则（不通过jQuery设置）

小提琴：http://jsfiddle.net/IrvinDominin/LT8zc/1/

在选择列表的更改上加载图像

1 个答案:

修改