Question

我有一个表单选择框，代码以前有效，但现在似乎不起作用，请有人帮我查找错误的位置

基本上我有一个带有#main的表单和一个名为#chart-type的选择框。我需要的＃chart-type选择框是根据需要显示/隐藏选择的div。如前所述，它曾在过去发挥作用。我有一个Javascript代码隐藏所有不必要的div onLoad但我从来没有遇到过这个问题永久隐藏这些。隐藏的div将包含图表，它们目前只是用于编码目的的灰色块。

非常感谢您的帮助。

隐藏的分区

<div id="chartdiv1" style="width:100%; height:600px"></div>
<div id="chartdiv2" style="width:100%; height:600px; background: #CCC">CHARTDIV2 - EURO CURRENCY</div>
<div id="chartdiv3" style="width:100%; height:600px; background: #CCC">CHARTDIV3 - GBP CURRENCY</div>
<div id="chartdiv4" style="width:100%; height:600px; background: #CCC">CHARTDIV4 -  ZAR CURRENCY</div>
<div id="chartdiv5" style="width:100%; height:600px; background: #CCC">CHARTDIV5 - USD PERFORMANCE PERIOD</div>
<div id="chartdiv6" style="width:100%; height:600px; background: #CCC">CHARTDIV6 - EURO PERFORMANCE PERIOD</div>
<div id="chartdiv7" style="width:100%; height:600px; background: #CCC">CHARTDIV7 - GBP PERFORMANCE PERIOD</div>
<div id="chartdiv8" style="width:100%; height:600px; background: #CCC">CHARTDIV8 - ZAR PERFORMANCE PERIOD</div>

表单代码

<form class="main" id="main">
Chart Type: 
<select id="chart-type" class="unit-price" >
<option value="unit-price1" id="unit-price1">Unit Price in US Dollars</option>
<option value="unit-price2" id="unit-price2">Unit Price in Alternative Currency</option>                    
<option value="unit-price3" id="unit-price3">Unit Price Performance over a Period</option>
</select>

<span id="hidden">Alternative Currency:</span> 
<select id="currency" class="unit-price-period" >
                    <option value="GSO_USD" id="GSO_USD">GSO_USD</option>
                    <option value="GSO_EUR" id="GSO_EUR">GSO_EUR</option>
                    <option value="GSO_GBP" id="GSO_GBP">GSO_GBP</option>
                    <option value="GSO_ZAR" id="GSO_ZAR">GSO_ZAR</option>
                </select>
            <span id="hidden2">Alternative Currency Period:</span> 
            <select class="unit-price-period" id="currency2">
                    <option value="GSO_USD1" id="GSO_USD1">GSO_USD</option>
                    <option value="GSO_EUR1" id="GSO_EUR1">GSO_EUR</option>
                    <option value="GSO_GBP1" id="GSO_GBP1">GSO_GBP</option>
                    <option value="GSO_ZAR1" id="GSO_ZAR1">GSO_ZAR</option>
            </select> 
  </form>

Jquery

$(document).ready(function() { 
    $( '#main' ).change( function() {
        var $select = $( '#chart-type' ),
        selected = $select.val();
        if ( selected == "unit-price1" ) {
        $( 'div#chartdiv1' ).show();
            chart1.invalidateSize();
        } else {
            $( 'div#chartdiv1' ).hide();
        }
        });

        $( '#main' ).change( function() {
        var $select = $( '#chart-type' ),
            selected = $select.val();
            if ( selected == "unit-price2" ) {
            $( 'div#chartdiv2, #hidden, #currency' ).show();
        } else {
        $( 'div#chartdiv2, #hidden, #currency' ).hide();

        }
        });
    $( '#main' ).change( function() {
            var $select = $( '#chart-type' ),
            selected = $select.val();
            if ( selected == "unit-price3" ) {
            $( 'div#chartdiv3, #hidden2, #currency2' ).show();
        }  else {
        $( 'div#chartdiv3, #hidden2, #currency2' ).hide();
        }
    });
    });
    function hide() {
    var show = ['chartdiv1'];
    for ( var i = 0; i < show.length; ++i ) 
    document.getElementById(show[i]).style.display = "block";
    var hide = ['chartdiv2','chartdiv3','chartdiv4','chartdiv5','chartdiv6','chartdiv7','chartdiv8','hidden','hidden2','currency','currency2'];
    for ( var i = 0; i < hide.length; ++i ) 
    document.getElementById(hide[i]).style.display = "none";
    }

Answer 1

尝试验证导航器控制台中是否存在此错误：

ReferenceError: chart1 is not defined
in chart1.invalidateSize();

修复可能解决问题。

Answer 2

首先检查Zakaria在回答中谈到的内容。然后你可以试试这个：

HTML

    <form class="main" id="main">
    Chart Type:
    <select id="chart-type" class="unit-price">
        <option value="" id="">-- Select Price --</option>
        <option value="unit-price1" id="unit-price1">Unit Price in US Dollars</option>
        <option value="unit-price2" id="unit-price2">Unit Price in Alternative Currency</option>
        <option value="unit-price3" id="unit-price3">Unit Price Performance over a Period</option>
    </select>
    <br/>
    <span id="hidden">Alternative Currency:</span>
    <select id="currency" class="unit-price-period">
        <option value="GSO_USD" id="GSO_USD">GSO_USD</option>
        <option value="GSO_EUR" id="GSO_EUR">GSO_EUR</option>
        <option value="GSO_GBP" id="GSO_GBP">GSO_GBP</option>
        <option value="GSO_ZAR" id="GSO_ZAR">GSO_ZAR</option>
    </select>
    <br/>
    <span id="hidden2">Alternative Currency Period:</span>
    <select class="unit-price-period" id="currency2">
        <option value="GSO_USD1" id="GSO_USD1">GSO_USD</option>
        <option value="GSO_EUR1" id="GSO_EUR1">GSO_EUR</option>
        <option value="GSO_GBP1" id="GSO_GBP1">GSO_GBP</option>
        <option value="GSO_ZAR1" id="GSO_ZAR1">GSO_ZAR</option>
    </select>
</form>

<div id="chartdiv1" style="width:100%; height:60px; background: #CCC">CHARTDIV1 - CURRENCY</div>
<div id="chartdiv2" style="width:100%; height:60px; background: #CCC">CHARTDIV2 - EURO CURRENCY</div>
<div id="chartdiv3" style="width:100%; height:60px; background: #CCC">CHARTDIV3 - GBP CURRENCY</div>
<div id="chartdiv4" style="width:100%; height:60px; background: #CCC">CHARTDIV4 - ZAR CURRENCY</div>
<div id="chartdiv5" style="width:100%; height:60px; background: #CCC">CHARTDIV5 - USD PERFORMANCE PERIOD</div>
<div id="chartdiv6" style="width:100%; height:60px; background: #CCC">CHARTDIV6 - EURO PERFORMANCE PERIOD</div>
<div id="chartdiv7" style="width:100%; height:60px; background: #CCC">CHARTDIV7 - GBP PERFORMANCE PERIOD</div>
<div id="chartdiv8" style="width:100%; height:60px; background: #CCC">CHARTDIV8 - ZAR PERFORMANCE PERIOD</div>

JQuery的

$(document).ready(function() { 
$('#main').change( function() {
    var $select = $('#chart-type'),
    selected = $select.val();
    switch (selected){
        case "unit-price1" :
            $( 'div#chartdiv1' ).show();

            $( 'div#chartdiv2, #hidden, #currency' ).hide();
            $( 'div#chartdiv3, #hidden2, #currency2' ).hide();
            break;
        case "unit-price2" :
            $( 'div#chartdiv2, #hidden, #currency' ).show();

            $( 'div#chartdiv1' ).hide();
            $( 'div#chartdiv3, #hidden2, #currency2' ).hide();
            break;
        case "unit-price3" :
            $( 'div#chartdiv3, #hidden2, #currency2' ).show();

            $( 'div#chartdiv1' ).hide();
            $( 'div#chartdiv2, #hidden, #currency' ).hide();
            break;
        default : "";
    }

});
function hide() {
  var show = ['chartdiv1'];
  for ( var i = 0; i < show.length; ++i ) 
     document.getElementById(show[i]).style.display = "block";
  var hide = ['chartdiv2','chartdiv3','chartdiv4','chartdiv5','chartdiv6','chartdiv7','chartdiv8','hidden','hidden2','currency','currency2'];
  for ( var i = 0; i < hide.length; ++i ) 
      document.getElementById(hide[i]).style.display = "none";
}
});

我做了一些样式修改只是为了在jsfiddle上正确显示它。

您可以自行测试：http://jsfiddle.net/v14pLfnb/ 如果您有任何疑问，请不要犹豫。

最好的问候

为什么我的表单选择框没有切换项目？

2 个答案:

HTML

JQuery的