Question

我正在尝试根据在下拉菜单中进行的选择来隐藏/显示字段。

jQuery的代码似乎没有采取。有什么建议？ jQuery新手。我将文件保存为.php

jQuery的：

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript">
            $(document).ready(function() {
                $.viewMap = {
                    '0' : $([]),
                    'view1' : $('#view1'),
                    'view2' : $('#view2a, #view2b'),
                    'view3' : $('#view3')
                };
                $('#viewSelector').change(function() {
                    // hide all
                    $.each($.viewMap, function() { this.hide(); });
                    // show current
                    $.viewMap[$(this).val()].show();
                });
            });
        </script>
</head>

HTML：

<select id="viewSelector">
       <option value="0">-- Select a View --</option>       
       <option value="view1">view1</option>
       <option value="view2">view2</option>
       <option value="view3">view3</option>
</select>

    <select id="viewSelector">
       <option value="0">-- Select a View --</option>       
       <option value="view1">view1</option>
       <option value="view2">view2</option>
       <option value="view3">view3</option>
    </select>

    <div id="view1">
      <!-- content --> 
    </div>
    <div id="view2a">
      <!-- content --> 
    </div>
    <div id="view2b">
      <!-- content --> 
    </div>
    <div id="view3">
    <!-- content --> 
    </div>

Answer 1

您有一个重复的<select>。如果删除它，视图选择器将起作用：

JSFiddle

如果由于您发布的内容之外的代码而在幕后发生任何jQuery问题，请按Chrome中的F12打开DevTools，然后点击Console tab以查看刷新后的任何JavaScript错误页面。

Answer 2

Ids应该是唯一的。在您的代码中，有2个具有相同ID name的选择。您可以删除一组。

给每个div一个共同的类，如;

viewSelector

然后尝试使用此类隐藏所有div。然后在下拉选择中显示所需的div。整个代码可能看起来像;

<div class="views" id="view3">

Here 是一个演示版。希望这会有所帮助。

Answer 3

请尝试以下代码：

jQuery的：

 $(document).ready(function() {
    $('#viewSelector').change(function() {
       $('.view').hide();
      // show current
       if($(this).val() !== 0){
         if($(this).val() == "view2"){
             $("#view2a, #view2b").show();
         }else{
             $("#"+ $(this).val()).show();
         }
       }
   });
});

HTML：

<select id="viewSelector">
   <option value="0">-- Select a View --</option>       
   <option value="view1">view1</option>
   <option value="view2">view2</option>
   <option value="view3">view3</option>
</select>

<div id="view1" class="view">
  <!-- content --> 
</div>
<div id="view2a" class="view">
  <!-- content --> 
</div>
<div id="view2b" class="view">
  <!-- content --> 
</div>
<div id="view3" class="view">
<!-- content --> 
</div>

jQuery似乎没有在浏览器上工作

3 个答案: