追加不同的div ID到選項選擇？

我想追加一個不同的ID到select元素中的選項。我可以用圖像做到這一點，但不知道如何與ID的追加不同的div ID到選項選擇？

例做到這一點：對於圖片我們使用：

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

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

典型的選擇是：

<select id="selectanimage" name="selectanimage" style="width: 474px;" class="required"> 
<option value="null">--- Select your Image ... ---</option> 
<option value="share/images/125x125blk.png">125px x 125px Black Background</option> 
<option value="share/images/125x125wht.png">125px x 125px White Background</option> 
<option value="share/images/180x100blk.png">180px x 100px Black Background</option> 
</select>

我想要什麼要做的是...將選項中的值更改爲差別類或id，然後讓js相應地切換。

因此期權價值=「蘋果」期權價值=「foo」的

林不知道如果多數民衆贊成100％清晰笑

的目標是，在div ID masterpreview可以包含新的class和id選項的元素。

即。

期權的點擊

（比如有人點擊富）

然後，我們將生成：

<div id="masterPreview"> 
    <div class="foo"></div>  
</div>

來源

2012-02-21 422

如果我理解正確（這很坦率地說，我懷疑 - 你的問題是非常混亂）你是說你想要一個選擇元素，選擇不同的選項將顯示不同的div。

你認爲這可以通過給每個選項一個值來顯示div的類名（其中實際的div由div「masterPreview」包含在頁面的其他地方）來實現，但是你不會'不知道如何編寫代碼來隱藏和顯示相應的div時，選擇不同的選項。

對於作爲我總結了它的要求，這裏的工作演示，讓你可以看到，如果我甚至在球場：http://jsfiddle.net/abw3T/

如果這是遠程像你想做的事，然後這個是什麼如何代碼是：

<style> 
    #masterPreview > div { display: none; } 
</style> 

<select> 
    <option value="none">--Please select--</option> 
    <option value="apple">Apple</option> 
    <option value="banana">Banana</option> 
    <option value="carrot">Carrot</option> 
</select> 
<div id="masterPreview"> 
    <div class="apple">Apple Div</div> 
    <div class="banana">Banana Div</div> 
    <div class="carrot">Carrot Div</div> 
</div> 

<script> 
$("select").change(function(){ 
    $("#masterPreview > div").hide(); 
    $("." + $(this).val()).show(); 
}); 
</script>

這確實不是太它：關於選擇隱藏更改事件的所有任何masterPreview的孩子的div可能當前可見然後只顯示一個與類名匹配的所選選項的值。

注意：不應該使用類來唯一標識元素，這就是id屬性的用途，但是您的示例div使用了一個類，所以我堅持使用它。該代碼將是完全一樣的使用IDS 做到這一點，除了與.show()行具體做法是：

$("#" + $(this).val()).show()

來源

2012-02-21 05:21:11 nnnnnn

也門裏亞爾對不起，ID是完美的。將檢查謝謝 – 422 2012-02-21 05:27:35

完美謝謝@nnnnn – 422 2012-02-21 05:28:43

我認爲最好的方法是動態創建一個<div>內的div＃masterPreview。

$("select").change(function(){ 
    var option = $(this).val(); 
    if (option == 'none') { 
     $("#masterPreview").empty(); 
    } else { 
     $("#masterPreview").html($('<div />').addClass(option).html(option)); 
    } 
});

演示：http://jsfiddle.net/abw3T/2/

來源

2012-02-21 05:34:50 codef0rmer

這很聰明，將添加到我的代碼歡呼隊友 – 422 2012-02-21 05:46:42

不是一個壞的選擇，除了新創建的div的內容來自哪裏？在重複選擇中已經顯示的內容方面沒有多少意義。（當然，我假設真實世界的版本需要顯示比幾個字更小的東西）。您也沒有允許「無」選項根本不顯示任何內容，當然這是一個微不足道的變化。 – nnnnnn 2012-02-21 05:47:17

@nnnnnn：是的，修正了'無'選項問題。關於divs的內容是高達422 :-) – codef0rmer 2012-02-21 06:20:02

追加不同的div ID到選項選擇？

回答

相關問題