更改從下拉列表中選擇選項的所有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內容

回答

相關問題