如何根據下拉選項顯示div

我已經搜索了特定的解決方案，但無法找到我正在尋找的答案。我正在開發一個CMS系統，爲每個部分選擇一個預先開發的模塊。如何根據下拉選項顯示div

當用戶從第一個下拉列表中選擇一個模塊（選擇id ='section1'）時，該模塊的屬性列表將顯示。當用戶從第二個下拉列表中選擇一個模塊（選擇id ='section2'）時，應該顯示該模塊的屬性。有5個下拉列表可供選擇，每個列表都有相同的選項。我遇到的問題是，當進行第一次選擇時，屬性顯示一切正常。但是，當選擇第二個下拉列表時，第一個選擇的屬性集將被第二個選擇的相應div所取代。

我需要的是第一個選擇的div即使在選擇第二個選擇後也能顯示。因此，應該顯示兩個模塊的屬性。當第一個選項中的模塊發生變化時，div應該顯示它的屬性。請幫忙。我知道這是一些jQuery的做，但我不知道如何操作的代碼做什麼，我需要

例子：

<select id="section1"><option>Please Select</option> 
<option value="1">Module 1</option> 
<option value="2">Module 2</option> 
<option value="3">Module 3</option></select> 

<select id="section2"><option>Please Select</option> 
<option value="1">Module 1</option> 
<option value="2">Module 2</option> 
<option value="3">Module 3</option></select> 

<div id="module1" class="page" style="display:none;">Module 1 Properties</div> 
<div id="module2" class="page" style="display:none;">Module 2 Properties</div> 
<div id="module3" class="page" style="display:none;">Module 3 Properties</div>

的模式重複每個部分，就像我提到的，有5個部分，但是如果你能幫我分兩部分，我會明白。

我正在使用jQuery是：

$(function() { 
$('#section1').change(function() { 
    var val = $(this).val(); 
    if (val) { 
     $('div:not(#module' + val + ')').slideUp(); 
     $('#module' + val).slideDown(); 
    } else { 
     $('div').slideDown(); 
    } 
}); 
}); 

$(function() { 
$('#section2').change(function() { 
    var val = $(this).val(); 
    if (val) { 
     $('div:not(#module' + val + ')').slideUp(); 
     $('#module' + val).slideDown(); 
    } else { 
     $('div').slideDown(); 
    } 
}); 
});

來源

2014-03-12 Ricus du Plooy

如果你創建了一個的jsfiddle這將是巨大的（http://jsfiddle.net/）或CodePen（http://codepen.io/pen /）來顯示你的代碼的行爲 –

謝謝你的迴應。我將代碼添加到jsFille http://jsfiddle.net/H37eb/。 –

它應該添加新模塊，但是如果我在第1部分中更改了選項，它將在第1部分中添加另一個模塊，而不是替換它。當我在第2節中更改選項時，它會替換現有的選項，無論是在第1節還是第2節。基本節只應顯示選定的模塊。如果模塊在第1部分中更改，那麼它的屬性也應如此。第2部分也是如此。我確信有一個簡單的解決方案。 –

代碼

$('div:not(#module' + val + ')').slideUp();

將隱藏未連接到所選的下拉列表中所有的div。當您在「模塊2」下拉菜單中選擇時，這會導致「模塊1」-div隱藏。

試着去除那個，我暫時不能測試它。

來源

2014-03-12 10:57:57

我上傳了Jsfiddle腳本。刪除你建議的代碼行幾乎是我需要的 –

好吧，你想實現什麼功能缺失？ –

謝謝你的迴應。當module1被改變時，那麼它的屬性也應該如此。隨着這條線的消失，如果模塊1發生改變，它會添加一個新模塊，而不是用新的選定模塊替換它。是否有可能將id名稱作爲模塊名稱而不是1 2 3 4？如果2個模塊可以相同，那也是理想的。 –

http://jsfiddle.net/hc6sh/1/

$('select option').click(function(){ 
    var num = $(this).index() 
    var num = '#module'+num 
// alert(num) 
    $('.page').slideUp(); 
    $(num).slideDown(); 
});

試試這個

來源

2014-03-12 11:07:41 ShibinRagh

我更新了jsfiddle腳本以添加ajaz.googlrapis引用來查看它是否可以正常工作，但腳本無法使用或不使用這些行[link]（http：// jsfiddle。net/hc6sh/2 /） –

http://jsfiddle.net/hc6sh/2/ –

你加了什麼？我從CDN添加已經jQuery的，我的鏈接工作正常 – ShibinRagh

如何根據下拉選項顯示div

回答

相關問題