javascript - 如何显示/隐藏带有 <?php?> 的 <div>

Question

我正在尝试创建一个将显示一些 div 的下拉列表。在 div 中，我包含一个 PHP 文件。当我尝试使用下拉列表显示/隐藏 div 时，它不起作用。我的代码有什么问题？

 $(document).ready(function(){
        $('.report').hide();
        $('#prodi').change(function () {
            $(this).find("option").each(function () {
                $('#' + this.value).hide();
            });
            $('#' + this.value).show();

        });
      });
    </script>

下拉菜单

<div class="prodi ops" style="margin-bottom:10px;">
       Program Studi :
           <select id="prodi">
         <option value="">-Pilih Prodi-</option>
         <option value="D3-Teknik Informatika">D3-Teknik Informatika</option>
         <option value="Program Kompetensi">Program Kompetensi</option>
         <option value="S1-Teknik Informatika">S1-Teknik Informatika</option>
         <option value="S1-Sistem Informasi">S1-Sistem Informasi</option>
           </select>
       </div>

其他div

    <div class="report" id="S1-Teknik Informatika">
        <?php include 'searchs1if.php'; ?>
    </div>
  <div class="report" id="S1-Sistem Informasi">
    <?php include 'search_s1si.php'; ?>
  </div>
  <div class="report" id="D3-Teknik Informatika">
    <?php include 'searchd3if.php'; ?>
  </div>
  <div class="report" id="Program Kompetensi">
    <?php include 'searchprokom.php'; ?>
  </div>

感谢您的任何建议。

Answer 1

ID 中不允许有空格。当 jQuery 处理选择器时

$("#S1-Teknik Informatika")

它寻找一个带有 id="S1-Teknik" 的元素然后寻找 <Informatika>在该元素内的某处标记。

去掉您 ID 中的空格(当然还有 <select> 中的相应值)，您的代码就可以工作了。我在下面用下划线替换了它们。

下拉菜单

<div class="prodi ops" style="margin-bottom:10px;">
   Program Studi :
       <select id="prodi">
     <option value="">-Pilih Prodi-</option>
     <option value="D3-Teknik_Informatika">D3-Teknik Informatika</option>
     <option value="Program_Kompetensi">Program Kompetensi</option>
     <option value="S1-Teknik_Informatika">S1-Teknik Informatika</option>
     <option value="S1-Sistem_Informasi">S1-Sistem Informasi</option>
       </select>
   </div>

其他div

<div class="report" id="S1-Teknik_Informatika">
    <?php include 'searchs1if.php'; ?>
</div>
<div class="report" id="S1-Sistem_Informasi">
    <?php include 'search_s1si.php'; ?>
</div>
<div class="report" id="D3-Teknik_Informatika">
    <?php include 'searchd3if.php'; ?>
</div>
<div class="report" id="Program_Kompetensi">
    <?php include 'searchprokom.php'; ?>
</div>

<?php部分无关紧要。在将页面发送到浏览器之前，所有 PHP 代码都在服务器上展开。