根據兩個單獨的選擇選項顯示div

我有兩個不同的選擇字段。其中每個都有顏色選項：藍色，綠色，黑色，黃色。我想說明這取決於不同的div上selctions你做出像這樣：

選擇黃色+黑色顯示DIV＃1 選擇黑色+黃色顯示DIV＃2 等等

我該怎麼辦這是一個聰明的方式？

更新：

下面的代碼片段我現在所擁有的（它做什麼，我想，但僅僅依靠一個選擇元素）：

<script> 
$(document).ready(function() { 
    $(function() { 
    $('#thecolor').change(function(){ 
     $('#box_image, #box_image2, #box_image3, #box_image4').hide(); 
     $('.' + $(this).val()).show(); 
    }); 
    }); 
});

<select id="thecolor"> 
    <option>Choose outer color</option> 
    <option value="blue">Blue</option> 
    <option value="red">Red</option> 
    <option value="dark_green">Green</option> 
    <option value="purple">Purple</option> 
</select>

，然後

<div id="box_image" style="display:none;" class="blue"> 
    <img src="images/wine-bottle-box_blue.png"/> 
</div>

來源

2011-10-25 Ismailp

你使用一個單一的選項中選擇一個或多個選擇？您能否發佈您的代碼的相關片段？ – mamoo

這取決於您是否已經創建了所有可能性的所有div，或者您想從選擇 – WooDzu

添加som代碼生成em！ – Ismailp

要做到這一點，你可以在jQuery中使用toggle函數來顯示/隱藏基於2名選擇列表中的值的元素。只需勾選兩個選擇列表直到相同的click處理程序並檢查條件。

var $s1 = $('#select1').change(change); 
var $s2 = $('#select2').change(change); 

function change(){ 
    $('#div1').toggle($s1.val() == 'Yellow' && $s2.val() == 'Black') 
    $('#div2').toggle($s1.val() == 'Black' && $s2.val() == 'Yellow') 
};

活生生的例子：http://jsfiddle.net/6AUn6/

來源

2011-10-25 07:19:10 Jamiec

太棒了！與我的解決方案完美配合！感謝名單！ – Ismailp

H關於通過選項組合命名您的div的id。因此選擇yellow+black將顯示帶有ID的div，如div_yellow_black。

jQuery中，像

var var1 = $("#option1").val(); 
var var2 = $("#option2").val(); 
$("#div_" + var1 + "_" + var2).show();

來源

2011-10-25 07:16:35 Quincy

或者您的選擇可以被命名爲黃色，黑色等。 –

在我的理解中，我認爲OP意味着有4 x 4共16種組合... – Quincy

根據兩個單獨的選擇選項顯示div

回答

相關問題