HTML，jquery：在下拉列表中顯示對應於選擇的圖像

我有一個類似「jQuery onchange/onfocus select box to display an image?」的問題。HTML，jquery：在下拉列表中顯示對應於選擇的圖像

而不是一個下拉列表，我想合併兩個。我：

<select name="maps1" id="maps1" class="inputbox" size="1"> 
<option value=""> - Select State - </option> 
<option value="cal">California</option> 
<option value="ore">Oregon</option> 
<option value="was">Washington</option> 
</select>

和

<select name="maps2" id="maps2" class="inputbox" size="1"> 
<option value=""> - Select Crime - </option> 
<option value="total">Total Arrests</option> 
<option value="burg">Burglaries</option> 
<option value="dui">DUI</option> 
<option value="murders">Murder</option> 
</select>

我有12級的地圖名爲

"total_cal.png" 
"burg_cal.png" 
"dui_cal.png" 
"murders_cal.png" 
"total_ore.png" 
"burg_ore.png" 
etc. etc.

沒有人知道類似

$(document).ready(function() { 
    $("#image").change(function() { 
     var src = $(this).val(); 

     $("#imagePreview").html(src ? "<img src='" + src + "'>" : ""); 
    }); 
});

，這將有助於我獲得的功能正確的馬p到位了嗎？感謝

來源

2013-12-10 Chang

首先，這個函數將不起作用，因爲你應該將更改函數掛接到select元素，而不是「imagePreview」。我猜想「imagePreview」是一個div元素或容器元素，如果是這樣的話，使用下面這兩個函數：

$(function() { 
    $("#maps1").change(displayImg); 
    $("#maps2").change(displayImg); 
}); 

function displayImg(){ 
    var state = $('#maps1').val(); 
    var crime = $('#maps2').val(); 

    if(state != '' && crime != ''){    
     $("#imagePreview").html("<img src='" + crime + "_" + state + ".png'/>"); 
    } 
    else 
     $("#imagePreview").html(""); 
}

希望它可以幫助

利奧

來源

2013-12-10 01:55:01 Leo

這是美麗的:) – Chang

@Chang檢查我的答案。 –

$(document).ready(function() { 
    $('<img/>').hide().appendTo("#imagePreview"); 
    var m1 = $("#maps1"); 
    var m2 = $("#maps2"); 
    m1.add(m2).change(function() { 
     $("#imagePreview").find("img").show().attr('src',m2.val() + '_' + m1.val() + '.png'); 
    }); 
});

jsfiddle

來源

2013-12-10 01:42:38 Reigel

嗯，它似乎沒有工作。我討厭它怎麼不會給你任何錯誤信息.. – Chang

編輯並添加了一些演示...請看演示控制檯... – Reigel

好，如果your're的問題是，你可以使用

var src = $('#maps2').val() + '_' + $('#maps1').val() + '.png'

記住，你必須檢查兩個值都沒有空，完成任務：d

來源

2013-12-10 01:46:08 Aliceiw

fiddle Demo

個

HTML

<div id="imagePreview"> 
    <img src="" /> 
</div>

var ddl = $('select.inputbox'), //caching selectors 
    map1 = $('#maps1'), 
    map2 = $('#maps2'), 
    imgprev = $("#imagePreview"); 
imgprev.find('img').hide(); //hide image 
ddl.change(function() { 
    var len = ddl.filter(function() { 
     return this.value !== ''; 
    }).length; //get length of selcted dropdown where value is not null 
    if (len === 2) { //if both the values are selected than only change image 
     imgprev.find('img').show().prop('src', map1.val() + '_' + map2.val() + '.png') 
    } 
});

.prop()

.val()

.filter()

來源

2013-12-10 01:46:47

這裏有一個FIDDLE

$(function() { 
    $('#maps1, #maps2').change(function() { 
    var src = $('#maps2').val() + '_' + $('#maps1').val(); 
    if($('#maps1').val() && $('#maps2').val() !== '') { 
     $('#imagePreview').html('<img src="'+src+'.png">'); 
    } 
    }); 
});

來源

2013-12-10 02:09:34 mdesdev

HTML，jquery：在下拉列表中顯示對應於選擇的圖像

回答

相關問題