1

我有两个选择列表：

<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我想加载女孩图片...并且，何时Picture 1加载以及何时按下Next按钮图片 2 加载..等等。

我不知道该怎么做。

我的代码

4

1 回答 1

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/

如果我不明白我喜欢开发这个的问题:-)

编辑

如果您想在图像上设置 no-repeat，请将其设置为：

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

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

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

于 2013-06-07T17:26:11.873 回答