Question

我已经看到了一些基于选择显示/隐藏元素的解决方案，但我认为我需要更高效的方法

我需要显示所有div才能更改选择输入。在更改时，我只需要显示具有匹配ID的元素，并且除非它们与另一个下拉列表匹配（可能是3个输入），否则所有其他内容都将被隐藏

我知道它使用＆＃34; this.value＆＃34;但我不确定如何将其与显示功能结合起来

对于那些为代码而烦恼的人来说，下拉列表和相应的元素应该全部显示为默认值，但在未选中时隐藏

<select name="dataSelect" id="dataSelect" class="enter-drop" required>
<option value="" disabled>Data Amount</option>
<option value="any" selected>Any</option>
<option value="30">30GB</option>
<option value="12">12GB</option>
<option value="8">8GB</option>
</select>

<div id="30" class="deal">30GB of Data</div>
<div id="12" class="deal">12GB of Data</div>
<div id="8" class="deal">8GB of Data</div>

Answer 1

纯JavaScript。不需要为每个div元素使用ID。更好地使用data属性。

document.getElementById('dataSelect').addEventListener('change', function() {
  var nodes = document.querySelectorAll("div[data-amount]");
  var selected = this.options[this.selectedIndex];
  if (selected.value == "any") {
    for (var i = 0; i < nodes.length; i++) {
      nodes[i].style.display = 'block';
    }
  } else {
    for (var i = 0; i < nodes.length; i++) {
      nodes[i].style.display = (nodes[i].dataset.amount == selected.value) ? 'block' : 'none';
    }
  }

});

<select name="dataSelect" id="dataSelect" class="enter-drop" required>
<option value="" disabled>Data Amount</option>
<option value="any" selected>Any</option>
<option value="30">30GB</option>
<option value="12">12GB</option>
<option value="8">8GB</option>
</select>

<div data-amount="30" class="deal">30GB of Data</div>
<div data-amount="12" class="deal">12GB of Data</div>
<div data-amount="8" class="deal">8GB of Data</div>

Answer 2

这是一个可能的解决方案，或者至少可能是我认为你的意思的最小例子。

class User < ApplicationRecord

  # a example with where
  has_many :matching,
           -> { where "first_id==#{id} OR second_id==#{id}" },
           class_name: 'Match'

  has_many :matchers, # then ... how?

end

$(function() {
  $('#selector').on('input', function() {
      var comp = $(this).val()
    $('div').each(function(i, el) {
      if (el.id == comp){
        $(el).show()
      } else {
        $(el).hide()
      }
    })
  })
})

Answer 3

<sacript>
$('select[name=mySel]').change(function(){
   $('div').css('display','none');
   var id = $(this).val();
   $('div[id='+id+']').css('display','block');
})
</sacript>
<select name="mySel">
    <option value="myID1">myID1</option>
    <option value="myID2">myID2</option>
    <option value="myID3">myID3</option>
    <option value="myID4">myID4</option>
    <option value="myID5">myID5</option>
</select>

<div id="myID1">content1</div>
<div id="myID2">content2</div>
<div id="myID3">content3</div>
<div id="myID4">content4</div>
<div id="myID5">content5</div>

显示id匹配选择值的元素并隐藏其他元素

3 个答案: