複数のdivをドロップダウンの選択に基づいて表示

Question

特定の数のdiv（毎回異なる）を持つhtmlファイルがaitomatically生成されます。簡単にするために：

<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> 

私は動的に（ユニークブロックのIDに基づいて）ドロップダウン<select multiple></select>を埋めるの可能性について疑問に思って：

そして、選択されているもののみのdiv、表示：

を

plate2 info 
plate3 info 
plate 2 additional info 

Answer 1

• オブジェクトを作成し、要素のidとしてそれにキーを割り当てますその値をtrue
• に設定します。同じ値のidがArray#filterに繰り返され、また、
• がchangeイベント
要素 select超える値の場合は添付 selected属性を有する option要素を作成
• Array#map濾過アレイを濾過し、濾過要素
• のblockとしてdisplayが設定されています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>

Answer 2

このようなものを試してみてください。

:selectedているすべてのオプションにだけループおよびshow 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>