追加圖像在不同的選擇框中選擇一個div

您應該只能夠選擇所有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'" />'); 
    } 
});

來源

2013-04-26 DextrousDave

img標籤的字符串concat中存在拼寫錯誤（某些+符號缺失）。

真正的問題是搜索當前元素，你可以檢查當前的元素是通過使用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/

來源

2013-04-26 11:35:42

謝謝愛德華，正是我想要的 – DextrousDave 2013-04-26 12:49:03

-1

追加增加了一個選擇後的HTML。您是否嘗試過使用$('#reps').html('<img src="'a + x'" />');？

下面是一個例子： http://api.jquery.com/html/

來源

2013-04-26 11:18:05 Tsagoy

都能跟得上，不能正常工作。整個附加圖像代碼打破了我原來只允許一個選項的功能......你玩過我的小提琴嗎？ – DextrousDave 2013-04-26 11:23:25

實際上，你錯了，那不是附加的：http：//api.jquery.com/append/。「將由參數指定的內容插入到匹配元素集合中每個元素的末尾。」 – DextrousDave 2013-04-28 20:13:24

在這裏你去，有一些小的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+'" />'); 
    } 
});

請注意：要找出哪些改變，你需要使用.index()方法EQ元素。由於<br/>標籤，您選擇的索引是0,3和6。 <br/>標籤也正在計數。如果你需要像0,1,2這樣的索引，你需要從你的html代碼中刪除<br/>標籤:)並使用CSS定位選擇框。

來源

2013-04-26 11:34:36

謝謝你，感謝你的回答 – DextrousDave 2013-04-26 12:50:03

你爲什麼不只是引用圖像名稱到選項值？

HTML

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

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

});

小提琴這裏：http://jsfiddle.net/2DzUV/61/

來源

2013-04-26 11:36:35 RafH

追加圖像在不同的選擇框中選擇一個div

回答

相關問題