显示/隐藏基于下拉选项

时间：2018-07-15 18:05:55

标签： javascript jquery html css

我正在使用Jquery根据用户在下拉菜单中选择的内容来显示/隐藏div。

我的HTML：

<select>
   <option value='test'>Test</option>
   <option value='example'>Example</option>
   <option value='blah'>Blah</option>
</select>
<div data-show="blah">Should be shown when blah</div>
<div data-hide="example">Should be hidden when example</div>

我的Jquery（在coffeescript中）：

$("select").on "change", () ->
  shows = $('[data-show="' + $(this).val() + '"]')
  hides = $('[data-hides="' + $(this).val() + '"]')

  shows.show()
  hides.hides()

这在用户选择正确的选项（例如示例）时有效。但是，当用户返回说 Test 时，它应该回到默认值。如何使它工作？

6 个答案:

答案 0 :(得分：3)

可以使用filter()设置最终显示，并在过滤器之前对整个组执行相反的操作

$("select").on("change", function(){
  var value = this.value
  // hide all data-show
  $('[data-show]').hide().filter(function(){
     return $(this).data('show') === value;
  }).show()// only show matching ones
  
 $('[data-hide]').show().filter(function(){
     return $(this).data('hide') === value;
  }).hide()

}).change()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
   <option value='test'>Test</option>
   <option value='example'>Example</option>
   <option value='blah'>Blah</option>
</select>
<div data-show="blah">Should be shown when blah</div>
<div data-hide="example">Should be hidden when example</div>

答案 1 :(得分：1)

我不知道您在做什么，但这是描述的行为，可能不是您想要的：D 

$('select').on('change', (e) => {
  // apply defaults, then filter // credits to filter @charlietfl
  $('[data-show]').hide().filter('[data-show=' + $(e.target).val() + ']').show();
  $('[data-hide]').show().filter('[data-hide=' + $(e.target).val() + ']').hide();
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
   <option value='test'>Test</option>
   <option value='example'>Example</option>
   <option value='blah'>Blah</option>
</select>
<div data-show="blah">Should be shown when blah</div>
<div data-hide="example">Should be hidden when example</div>

编辑添加了默认的隐藏/显示

答案 2 :(得分：0)

创建要显示/隐藏的元素的选择：

var elements = $('[data-show], [data-hide]');

然后，您可以使用jQuery的.filter函数仅显示所选元素：

var elements = $('[data-show], [data-hide]');    

function showElement(option) {  
  var filter;  
  
  // hide all elements befor filtering
  elements.hide();
  
  // create the filter value, which will be used for filtering
  switch (option) {
    case 'test':
      filter = '[data-hide="example"]';
      console.log('show only example');
      break;
    
    case 'blah':
      filter = '*';
      console.log('show all elements');
      break;
      
    default:
      console.log('hide all elements (including example)');
      break;
  }  
  
  if (filter) {
    elements.filter(filter).show(); 
  }
}

showElement('test');

$("select").on("change", function() {
  showElement($(this).val());  
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value='test'>Test</option>
  <option value='example'>Example</option>
  <option value='blah'>Blah</option>
</select>
<div data-show="blah">Should be shown when blah</div>
<div data-hide="example">Should be hidden when example</div>

您也有几个 typos ：

  • 通过data-hide选择元素时，还会有一个额外的s（hides）：

    hides = $('[data-hides="' + $(this).val() + '"]')

  • 当您想通过调用hides隐藏.hides()时，jQuery仅具有.hide()函数来隐藏元素：

    hides.hides()

答案 3 :(得分：0)

<select class="selectBoxClass">
    <option value='test'>Test</option>
    <option value='example'>Example</option>
    <option value='blah'>Blah</option>
</select>
<div data-show="blah" class="all ">Should be shown when blah</div>
<div data-hide="example" class="all">Should be hidden when example</div>

<script>
    $(document).on('change', '.selectBoxClass', function(event) {
        event.preventDefault();
        $('div.all').show();
        shows = $('[data-show="' + $(this).val() + '"]')
        hides = $('[data-hides="' + $(this).val() + '"]')
        shows.show()
        hides.hides()
    });

</script>

**如果您之前的代码运行良好，则可以尝试一下。

答案 4 :(得分：0)

$(function(){
            $('div').hide();
            $('select').change(function(){
                if($(this).val()=='blah'){
                  $('div[data-show]').show();
                  $('div[data-hide]').hide();

                }else if($(this).val()=='example'){
                  $('div[data-hide]').show();
                  $('div[data-show]').hide();
                }else{
                  $('div[data-hide]').hide();
                  $('div[data-show]').hide();
                }
            })
        })   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <select>
   <option value='test'>Test</option>
   <option value='example'>Example</option>
   <option value='blah'>Blah</option>
</select>
<div data-show="blah">Should be shown when blah</div>
<div data-hide="example">Should be hidden when example</div>

答案 5 :(得分：0)

让我们假设您假设有一组div，您希望根据在jQuery下拉列表中选择的内容来显示/隐藏这些div。

这是可以实现的方式。

网格 

<div class="row exhbitors-grid-row">
                            
    <div class="col-lg-6 col-md-6 exhibitor-grid-item" style="">
        <div class="exhibitor-grid-large wow pixFadeRight" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: pixFadeRight;">
            <div class="member-avater">
                <img src="#" alt="">
            </div>
            <div class="listing-page-exhibitor-brief wow pixFadeUp" style="visibility: visible; animation-name: pixFadeUp;">
                <div class="exhibitor-details">
                    <input type="hidden" name="industry" class="industry Accommodation" value="Accommodation">
                    <h4 class="grid-exhibitor-title">Tourist Board</h4>
                    <strong class="grid-exhibitor-copy">Manning the Booth</strong>
                    <div class="grid-item-host">
                        <span>User</span>
                        <a href="bcard.pdf" target="_blank" title="Download business card"><i class="fa fa-address-card b-card-file" aria-hidden="true"></i>
                        </a> 
                    </div>
                </div>
            </div>
        </div>
    </div>
                
    <div class="col-lg-6 col-md-6 exhibitor-grid-item" style="">
        <div class="exhibitor-grid-large wow pixFadeRight" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: pixFadeRight;">
            <div class="member-avater">
                <img src="#" alt="">
            </div>
            <div class="listing-page-exhibitor-brief wow pixFadeUp" style="visibility: visible; animation-name: pixFadeUp;">
                <div class="exhibitor-details">
                    <input type="hidden" name="industry" class="industry Airline" value="Airline">
                    <h4 class="grid-exhibitor-title">Tourist Board</h4>
                    <strong class="grid-exhibitor-copy">Manning the Booth</strong>
                    <div class="grid-item-host">
                        <span>User</span>
                        <a href="bcard.pdf" target="_blank" title="Download business card"><i class="fa fa-address-card b-card-file" aria-hidden="true"></i>
                        </a> 
                    </div>
                </div>
            </div>
        </div>
    </div>
    ...
    ...
    ...
    
</div>

在页面的某处，您有一个下拉列表，如下所示：

<select class="category-select" name="category-select" id="category-select">
    <option value="-1">Industry </option>
    <option value="1">Accommodation</option>
    <option value="2">Airline</option>
    <option value="3">Car Rentals</option>
    <option value="4">City Tourist Board</option>
    ...
    ...
    ...
</select>

在更改此下拉列表时，我们只想显示具有与所选下拉菜单项相同的隐藏字段值的div。 在div中检查上方的隐藏字段值。

我们需要一些jQuery来完成魔术。这是它的外观：

$(document).ready(function(){
if($(".category-select")){
$(".category-select").change(function(){
    $(".exhibitor-grid-item").show();
    var selectedIndustry = $(".category-select option:selected").text();
    $(".exhibitor-grid-item").each(function(){
        var $itemIndustry = $(this).find(".industry").val();
        if($(".category-select option:selected").val() > -1){
          if(selectedIndustry != $itemIndustry){
            $(this).find(".industry").parent().parent().parent().parent().hide();
          }
        }
     });
   });
 }
});
相关问题
最新问题