Question

我有4个选择框，应该执行以下操作：

您应该只能在所有3个选择框之间选择一个选项，因此一次只能有一个选择框包含一个值 - 现在此部分可以使用。

不起作用且破坏上述功能的部分： 当你在其中一个选择框中选择一个值时，一个图像应该附加到一个空div：每个选择框代表一个人（第一个选择除外），当你选择那个人时，他的图像应该出现在div中（ #reps）。

我该怎么做？

这是我的FIDDLE

<select>
    <option>---</option>
    <option>Office</option>
</select>
<br />
<br />
<select>
    <option>---</option>
    <option>Mark</option>
</select>
<br />
<br />
<select>
    <option>---</option>
    <option>Magnus</option>
</select>
<br /><br />
<select>
    <option>---</option>
    <option>Adii</option>
</select>
<br />
<br />

<div id="reps">

</div>

jQuery的：

var a = 'http://woothemes.wpengine.netdna-cdn.com/wp-content/themes/woo/images/team/';
var x = 'mark.jpg';
var y = 'magnus.jpg';
var z = 'adii.jpg';

$('select').eq(0).find('option').eq(1).attr('selected','selected');

$('select').on('change', function () {
    $('select').not(this).val("---");

    //the problem area below that breaks my cod as well, remove to see
    if(this.eq() == 1){
        $('#reps').append('<img src="'a + x'" />');
    }
    else if(this.eq() == 2){
        $('#reps').append('<img src="'a + y'" />');
    }

    else if(this.eq() == 3){
        $('#reps').append('<img src="'a + z'" />');
    }
});

Answer 1

在这里，有一些小的jQuery错误，我已经修复了它们。

http://jsfiddle.net/2DzUV/64/

var a = 'http://woothemes.wpengine.netdna-cdn.com/wp-content/themes/woo/images/team/';
var x = 'mark.jpg';
var y = 'magnus.jpg';
var z = 'adii.jpg';

$('select').eq(0).find('option').eq(1).attr('selected','selected');

$('select').on('change', function () {
    $('select').not(this).val("---");
    $('#reps').empty();
    //the problem area below that breaks my cod as well, remove to see
    if($(this).index() == 0){        
        $('#reps').append('<img src="'+a+x+'"/>');
    }
    else if($(this).index() == 3){
        $('#reps').append('<img src="'+a+y+'"/>');
    }

    else if($(this).index() == 6){
        $('#reps').append('<img src="'+a+z+'" />');
    }
});

请注意：要找出更改的eq元素，您需要使用.index()方法。由于<br/>标记，您的选择的索引是0,3和6。 <br/>标记也在计算中。如果您需要索引（如0,1,2），则需要从html代码中删除<br/>标签:)并使用CSS定位选择框。

Answer 2

img标签的字符串连接中有一个拼写错误（某些+符号缺失）。

真正的问题是搜索当前元素，您可以使用is

检查当前元素是否是特定的isntance

根据选择器元素检查当前匹配的元素集，或jQuery对象，如果至少有其中一个元素，则返回true 匹配给定的参数。

代码：

if ($('select').eq(0).is($(this))) {
    $('#reps').append('<img src="' + a + x + '" />');
} else if ($('select').eq(1).is($(this))) {
    $('#reps').append('<img src="' + a + y + '" />');
} else if ($('select').eq(2).is($(this))) {
    $('#reps').append('<img src="' + a + z + '" />');
}

工作小提琴：http://jsfiddle.net/IrvinDominin/jjyh5/

Answer 3

为什么不将图像名称引用到选项值？

HTML

[...]
<select>
    <option>---</option>
    <option value="adii.jpg">Adii</option>
</select>
[...]

JS

[...]
$('select').on('change', function () {
    $('select').not(this).val("---");
    $('#reps').html('<img src="' + a + $(this).val() + '" />');

});

在这里小提琴：http://jsfiddle.net/2DzUV/61/

Answer 4

追加在所选的后面添加html。您是否尝试使用$('#reps').html('<img src="'a + x'" />');？

这是一个例子： http://api.jquery.com/html/

在不同的选择框选项上将图像附加到div

4 个答案: