在选择时隐藏和显示特定的 div

Question

好的，我有从数据库中选择的动态类别，我将它们放在选择下拉列表中， 每个类别都有多篇文章， 首先我显示所有文章 问题是，我想选择一个类别，我只显示与该类别相关的文章并隐藏其余的， 为此，我将文章放在 div 中，每个 div 都有自己相关的类别。 我卡住了如何隐藏和显示它们 这是我的代码示例：

 <select  id="selectleft" >
     <option value="categorie">categorie</option></center>
         <option value="categorie1">sport</option>
         <option value="categorie2">movies</option>
         <option value="categorie3">news</option>


        </select>

并且文章是这样显示的

<div class="categorie1>article 1 </div>
<div class="categorie1>article 2 </div>
<div class="categorie2>article 1 </div>
<div class="categorie2>article 2 </div
<div class="categorie3>article 3 </div>
<div class="categorie3>article 3 </div

好的，例如，如果我选择 categorie1 ，则所有类别为 1 的 div 都会显示，而其余的则隐藏

Answer 1

这可能会有所帮助；）

$('#selectleft').change(function() {
  /* hide visible articles */
  $('.category:visible').hide();
  
  /* show selected option articles */
  $('.' + this.value).show();
});

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <select id="selectleft">
      <option value="categorie">categorie</option>
      <option value="categorie1">sport</option>
      <option value="categorie2">movies</option>
      <option value="categorie3">news</option>
    </select>

    <div class="category categorie">article(categorie option 1 default selected)</div>
    <div class="category categorie1">article 1(sport option 2)</div>
    <div class="category categorie1">article 2(sport option 2)</div>
    <div class="category categorie2">article 1(movies option 3)</div>
    <div class="category categorie2">article 2(movies option 3)</div>
    <div class="category categorie3">article 3(news option 4)</div>
    <div class="category categorie3">article 3(news option 4)</div>

Answer 2

您可以使用change() 事件处理程序

$('#selectleft').change(function() {
  // hide all div
  $('.categorie').hide();
  // or hide only the rest by
  // $('.categorie').not('.' + this.value).hide();

  // show div based on selected option
  $('.' + this.value).show();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="selectleft">
  <option value="categorie">categorie</option>
  <option value="categorie1">sport</option>
  <option value="categorie2">movies</option>
  <option value="categorie3">news</option>
</select>

<div class="categorie categorie1">article 1</div>
<div class="categorie categorie1">article 2</div>
<div class="categorie categorie2">article 1</div>
<div class="categorie categorie2">article 2</div>
<div class="categorie categorie3">article 3</div>
<div class="categorie categorie3">article 3</div>

Answer 3

按照你说的，我做了代码。请检查以下sn-p。

$('#selectleft').change(function()
{
  $('.article').addClass('deactive');
   var x = $('#selectleft').val();
   $('.'+x).removeClass('deactive');
});

.deactive{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1> select cotegories</h1>
<select  id="selectleft" >
     <option value="categorie">categorie</option>
         <option value="categorie1">sport</option>
         <option value="categorie2">movies</option>
         <option value="categorie3">news</option>


        </select>

<div class="article deactive categorie1">article 1 </div>
<div class="article deactive categorie1">article 2 </div>
<div class="article deactive categorie2">article 3 </div>
<div class="article deactive categorie2">article 4 </div>
<div class="article deactive categorie3">article 5 </div>
<div class="article deactive categorie3">article 6 </div>

Answer 4

<script>
$('#selectleft').change(function()
{
   var x = $('#select').val();
   $('.x').hide();
});
</script>