更改从下拉列表中选择选项的所有div内容

我想更改div的内容，其中div使用相同的名称，代码工作正常，但它只是改变第一个div的内容我应该怎么做？代码如下。更改从下拉列表中选择选项的所有div内容

<select id="select" name="cd-dropdown" class="cd-select"> 
<option value="-1" selected>Currency</option> 
<option value="1">Dollar $</option> 
<option value="2">Pound £</option> 
<option value="3">Rupees </option> 
<option value="4">Dirham </option> 
</select> 



<script> 
$(document).ready(function() { 
$('.pr-price').hide(); 
$('#2').show(); 
$('#select').change(function() { 
    $('.pr-price').hide(); 
    $('#'+$(this).val()).show(); 
}); }); 

<div id="1" class="pr-price">$100</div> 
<div id="2" class="pr-price">£200</div> 
<div id="3" class="pr-price">Rs300</div> 
<div id="4" class="pr-price">D400</div>

来源

2014-02-20 Ibad_Pak

Works [here]（http://jsfiddle.net/6et39/）！ –

其工作已经 – Dexture

它将工作在HTML5兼容的浏览器，但不是在所有，而不是在某些DOCTYPE – mplungjan

这是因为你使用ID，如果你想在多个地方运行，使用Class

Working Demo

代码

$(function() { 
    $('.pr-price').hide(); 
    $('.d2').show(); 

    $('#select').on("change",function() { 
    $('.pr-price').hide(); 
    $('.d'+$(this).val()).show(); 
    }).val("2"); 
});

HTML

<div class="pr-price d1">$100</div> 
<div class="pr-price d2">£200</div> 
<div class="pr-price d3">Rs300</div> 
<div class="pr-price d4">D400</div>

来源

2014-02-20 11:57:05

感谢兄弟它的作品:) –

很高兴我可以帮助:-)标记为答案它帮助你。 –

@SurjithSM你有一个很好的起点，我会说... – mplungjan

要使用一个以上的格，使用

<div class="pr-price d1">$100</div> 
<div class="pr-price d2">£200</div> 
<div class="pr-price d3">Rs300</div> 
<div class="pr-price d4">D400</div> 
<hr/> 
<div class="pr-price d1">$500</div> 
<div class="pr-price d2">£600</div> 
<div class="pr-price d3">Rs700</div> 
<div class="pr-price d4">D800</div>

使用类

Live Demo

$(function() { 
    $('.pr-price').hide(); 
    $('.d2').show(); 
    $('#select').on("change",function() { 
    $('.pr-price').hide(); 
    $('.d'+$(this).val()).show(); 
    }).val(2); // reflect the div shown 
});

如果您使用的ID，你应该改变ID不是数字 - 数字ID将在一些（HTML5兼容），但不是所有的浏览器

Live Demo

$(function() { 
    $('.pr-price').hide(); 
    $('#d2').show(); 
    $('#select').on("change",function() { 
    $('.pr-price').hide(); 
    $('#d'+$(this).val()).show(); 
    }).val(2); // reflect the div shown 
});

使用

<div id="d1" class="pr-price">$100</div> 
<div id="d2" class="pr-price">£200</div> 
<div id="d3" class="pr-price">Rs300</div> 
<div id="d4" class="pr-price">D400</div>

来源

2014-02-20 10:44:51 mplungjan

亲爱的我知道它的工作正常但同一个div在其他地方也使用我也想改变内容无处不在这个div在网站上使用但其唯一的变化在 –

的第一个div对不起，我离我的键盘 – mplungjan

你的所作所为是正确的工作。除了仅指定id中的数值。 ID不能是数字。更改ID为

<div id="price1" class="pr-price">$100</div> 
<div id="price2" class="pr-price">£200</div> 
<div id="price3" class="pr-price">Rs300</div> 
<div id="price4" class="pr-price">D400</div>

也改变

$('#select').change(function() { 
    $('.pr-price').hide(); 
    $('#price'+$(this).val()).show(); 
});

这应该帮助。

来源

2014-02-20 10:52:17 Bala

更改从下拉列表中选择选项的所有div内容

回答

相关问题