jQuery似乎不适用于浏览器

Question

I'm trying to hide/display fields according to which selection is made in a drop down menu. 我试图根据在下拉菜单中所做的选择隐藏/显示字段。

Reference Code 参考代码

The code for the jQuery doesn't seem to be taking. jQuery的代码似乎没有占用。 Any suggestions? 有什么建议么？ New to jQuery. jQuery新手。 I'm saving my files as .php 我将文件另存为.php

jQuery: 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: 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

You have a duplicate <select> . 您有一个重复的<select> 。 If you remove it, the view selector works: 如果删除它，则视图选择器将起作用：

JSFiddle 的jsfiddle

If there are any jQuery issues occurring behind the scenes due to code outside of what you posted, press F12 in Chrome to open the DevTools , and click the Console tab to see any JavaScript errors after refreshing the page. 如果由于您发布的代码之外的代码而在后台发生任何jQuery问题，请在Chrome中按F12打开DevTools ，然后在刷新页面后单击“ 控制台”选项卡以查看任何JavaScript错误。

Answer 2

Ids should be unique. ID应该是唯一的。 In your code, there are 2 selects with same id viewSelector . 在您的代码中，有2个具有相同id viewSelector选择。 You may remove one set. 您可以删除一组。

Give each div a common class like; 给每个div一个普通的类，例如；

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

Then try to hide all divs using this class. 然后尝试使用此类隐藏所有div。 Then show the required div on drop down select. 然后在下拉菜单中显示所需的div。 The entire code may look like; 整个代码可能看起来像；

$.viewMap = {
  '0': $([]),
  'view1': $('#view1'),
  'view2': $('#view2a, #view2b'),
  'view3': $('#view3')
};
$('#viewSelector').change(function() {
  // hide all
  $(".views").hide();
  // show current
  $.viewMap[$(this).val()].show();
});

Here is a demo. 这是一个演示。 Hope this helps. 希望这可以帮助。

Answer 3

Please try below code: 请尝试以下代码：

jQuery: 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: 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 个解决方案

解决方案1
2 已采纳 2016-01-06 13:09:22

解决方案2
1 2016-01-06 13:36:42

解决方案3
0 2016-01-06 13:09:07

jQuery似乎不适用于浏览器

问题描述

3 个解决方案

解决方案1 2 已采纳 2016-01-06 13:09:22

解决方案2 1 2016-01-06 13:36:42

解决方案3 0 2016-01-06 13:09:07

解决方案1
2 已采纳 2016-01-06 13:09:22

解决方案2
1 2016-01-06 13:36:42

解决方案3
0 2016-01-06 13:09:07