Question

如何在选择以下选项时显示图像。

示例： -

<select name="payment">
<option value="">Please Select</option>
<option value="Paypal">Paypal</option>
<option value="Bank">Bank</option>
</select>

<div id="payment"><img src="paypal.gif" alt="paypal" /></div>

如果我们在div id="payment"上选择paypal，则会显示徽标paypal以及银行是否会显示银行徽标。

可以用jquery完成吗？让我知道。

Answer 1

假设：您的银行徽标名为bank.gif。

编辑：添加代码以检查空白值。

$('select[name=payment]').change(function() {

  var val = $(this).val();

  $('div#payment img')
    .attr('src', val + '.gif')
    .css('display', val.length ? 'block' : 'none');
});

Answer 2

Doh，误读了这个问题，更新了：
你只需要一个小的事件处理程序就可以做到这一点，如下所示：

$(function() {
  $("select[name=payment]").bind("change", function() {
    $("#payment img").attr('src', $(this).val().toLowerCase() + ".gif");
  }).change();
});

此方法根据当前选定的值调整图像的src。此外，我们在document.ready上触发一次事件，使初始隐藏/显示状态与下拉列表匹配。

Answer 3

您需要首先隐藏paypal.gif

<select name="payment">
<option value="Paypal">Paypal</option>
<option value="Bank">Bank</option>
</select>

<div id="payment"><img src="paypal.gif' alt="paypal' /></div>

然后将更改处理程序绑定到select。

<script>
var images = { 
    'Paypal': 'paypal.gif', 
    'Bank': 'bankLogo.gif'
};

$("select").bind("change",function(){
    $("div#payment img:first").attr('src', images[$("select :selected").val()] );
});
</script>

使用jquery，css单击选择选项时如何显示图像

3 个答案: