根據下拉選項顯示多個div

具有一定數量的div（每次不同）的html文件都是自動生成的。爲了簡單起見：根據下拉選項顯示多個div

<div id="plate1"> 
    <p>plate 1 info</p> 
</div> 
<div id="plate2"> 
    <p>plate 2 info</p> 
</div> 
<div id="plate3"> 
    <p>plate 3 info</p> 
</div> 
<div id="plate2"> 
    <p>plate 2 additional info</p> 
</div>

我想知道關於動態填充下拉<select multiple></select>的可能性（基於唯一的塊的IDS）：

且僅顯示這些div，其選自：

plate2 info 
plate3 info 
plate 2 additional info

來源

2016-07-06 Alex Nevsky

你可以使用jQuery？ – Alexis

@Alexis，是的，當然 –

你想根據選擇顯示div嗎？ –

創建一個對象和鍵指定給它作爲元素的id ，將其值設爲true
如果具有相同的其他元素id在Array#filter迭代，將其過濾
Array#map經濾波的陣列和設置display作爲過濾元件
的block另外產生具有selected屬性option元件
附加change事件超過select元件
如果值option爲selected，使div具有id，因爲value出現，否則display : none

var select = document.getElementById('select'); 
 
var elems = document.querySelectorAll('.plate'); 
 
var obj = {}; 
 
var filtered = [].filter.call(elems, function(el) { 
 
    if (!obj[el.id]) { 
 
    obj[el.id] = true; 
 
    return true; 
 
    } else { 
 
    return false; 
 
    } 
 
}); 
 
var selectOpt = filtered.map(function(el) { 
 
    el.style.display = 'block'; 
 
    return '<option selected>' + el.id + '</option>'; 
 
}); 
 
select.innerHTML = selectOpt.join(''); 
 
select.addEventListener('change', function() { 
 
    for (var i = 0, iLen = select.options.length; i < iLen; i++) { 
 
    var opt = select.options[i]; 
 
    var val = opt.value || opt.text; 
 
    if (opt.selected) { 
 
     document.getElementById(val).style.display = 'block'; 
 
    } else { 
 
     document.getElementById(val).style.display = 'none'; 
 
    } 
 
    } 
 
});

div { 
 
    display: none; 
 
}

<div id="plate1" class="plate"> 
 
    <p>plate 1 info</p> 
 
</div> 
 
<div id="plate2" class="plate"> 
 
    <p>plate 2 info</p> 
 
</div> 
 
<div id="plate3" class="plate"> 
 
    <p>plate 3 info</p> 
 
</div> 
 
<div id="plate2" class="plate"> 
 
    <p>plate 2 additional info</p> 
 
</div> 
 

 
<select multiple id='select'></select>

來源

2016-07-06 07:39:28 Rayon

可能最初選擇所有的值？ –

@AlexIanevski，沒有找到你.. – Rayon

我的意思是，這是否是可能的，下拉菜單中的所有選項都是最初選定的，目前沒有選項（沒有板）最初被選中。 –

嘗試類似這樣的東西。

上誰是:selected和顯示DIV所有選項只是循環取決於他們的text()或val()

$("#myselect option").prop("selected",true); 
 

 
$("#myselect").change(function(){ 
 
    $(".mydiv").hide(); 
 
    $("#myselect option:selected").each(function(){ 
 
    $("#mydiv"+$(this).val()).show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select multiple id="myselect"> 
 
    <option value="1">div1</option> 
 
    <option value="2">div2</option> 
 
    <option value="3">div3</option> 
 
    <option value="4">div4</option> 
 
</select> 
 

 
<div class="mydiv" id="mydiv1">First div</div> 
 
<div class="mydiv" id="mydiv2">Second div</div> 
 
<div class="mydiv" id="mydiv3">third div</div> 
 
<div class="mydiv" id="mydiv4">Fourth div</div>

來源

2016-07-06 07:33:46 Alexis

根據下拉選項顯示多個div

回答

相關問題