根据菜单选择显示/隐藏表单元素

Question

我正在尝试编写（在学习 JQuery 时）以下内容：

我有一个包含各种元素的表单。基于使用选择菜单项所做的选择，我希望隐藏或显示一个或多个元素。到目前为止，我有这个脚本：

  // JavaScript Document
var joinApp = {
    ready : function() {
        var selApp = 'institution'
        $('select#appType').click(function() {
            var selApp = $("#appType :selected").text();

            switch ($selApp) {
                case 'institution':
                {
                    $('li#attachFile').addClass('turnOn');
                    break;
                }

                case 'individual':
                {
                    $('li#attachFile').removeClass('turnOn').addClass('turnOff');
                    $('li#beac_rep').addClass('turnOff');
                    $('li#instit_name').addClass('turnOff');
                    break;
                }

                case 'associate':
                {
                    $('li#instit_name').removeClass('turnOff').addClass('turnOn');
                    break;
                }
            }
        });
    }
}

这是表格：

    <form action="javascript:void(0);" method="post" enctype="multipart/form-data" class="clean" id="joinApp">
  <ol>

    <li>
      <fieldset>
        <legend>beac membership</legend>
        <ol>
        <li>
            <label for="date">date: <span class="alert">*</span></label>
            <input type="text" id="date" name="date" value="" />
        <script language="JavaScript">
    new tcal ({
        // form name
        'formname': 'join',
        // input name
        'controlname': 'date'
    });

    </script></li>
    <li>
            <label for="appType">choose membership type: <span class="alert">*</span></label>
            <select name="appType" id="appType">
              <option value="institution" id="instit">Institution</option>
              <option value="individual" id="individ">Individual</option>
              <option value="associate" id="assoc">Associate</option>
            </select>
          </li>
          <li id="instit_name">
            <label for="instit_name">name of institution/company: <span class="alert">*</span></label>
            <input type="text" id="instit_name" name="instit_name" value="" />
          </li>
          <li>
            <label for="address1">address:</label>
            <input type="text" id="address1" name="address1" value="" />
          </li>
          <li>
            <label for="address2">address 2:</label>
            <input type="text" id="address2" name="address2" value="" />
          </li>
          <li>
            <label for="city">city:</label>
            <input type="text" id="city" name="city" value="" />
          </li>
         <li>
            <label for="pcode">postal code:</label>
            <input type="text" id="pcode" name="pcode" value="" />
          </li>
          <li>
            <label for="prov">province or territory:</label>
            <select name="prov" id="prov">
              <option selected="selected">-- select province or territory --</option>
              <option value="Alberta">Alberta</option>
              <option value="British Columbia">British Columbia</option>
              <option value="Manitoba">Manitoba</option>
              <option value="New Brunswick">New Brunswick</option>
              <option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
              <option value="Northwest Territories">Northwest Territories</option>
              <option value="Nova Scotia">Nova Scotia</option>
              <option value="Nunavut">Nunavut</option>
              <option value="Ontario">Ontario</option>
              <option value="Prince Edward Island">Prince Edward Island</option>
              <option value="Québec">Québec</option>
              <option value="Saskatchewan">Saskatchewan</option>
              <option value="Yukon">Yukon</option>
            </select>
          </li>
          <li>
            <label for="areacode">areacode:</label>
            <input type="text" id="areacode" name="areacode" value="" />
          </li>
          <li style="">
            <label for="phone">phone:</label>
            <input type="text" id="phone" name="phone" value="###-###-####" />
          </li>
          <li>
            <label for="phone_ext">phone ext:</label>
            <input type="text" id="phone_ext" name="phone_ext" value="" />
          </li>
          <li>
            <label for="fax">fax:</label>
            <input type="text" id="fax" name="fax" value="" />
          </li>
          <li id="beac_rep">
            <label for="instit_rep">BEAC rep name:</label>
            <input type="text" id="instit_rep" name="instit_rep" value="" />
          </li>
          <li>
            <label for="title">title:</label>
            <input type="text" id="title" name="title" value="" />
          </li>
          <li>
            <label for="PHORM_FROM">email: <span class="alert">*</span></label>
            <input name="PHORM_FROM" type="text" id="PHORM_FROM" value="" />
          </li>
          <li>
            <label for="instit_web">institutional web site:</label>
            <input type="text" id="instit_web" name="instit_web" value="" />
          </li>
          <li id="attachFile">
            <label for="attach">attach document:</label>
            <input type="file" name="attach" id="attach" />
          </li>
        </ol>
      </fieldset>
    </li>
  </ol>

    <input type="reset" value="CANCEL" />
    <input type="submit" value="OK" />

</form>

这是我的 CSS：

li#attachFile     { display: block; }
form#joinApp li.turnOff { display: none; }
form#joinApp li.turnOn { display: block; }

到目前为止，这不起作用。我感谢任何人可以给我的任何帮助。

戴夫

Answer 1

jQuery 的写法类似于

$(function() {

    $('#appType').change(function() {
        switch ($(this).val()) {
            case 'institution':
                $('#attachFile').addClass('turnOn');
                break;
            case 'individual':
                $('#attachFile').removeClass('turnOn').addClass('turnOff');
                $('#beac_rep, #instit_name').addClass('turnOff');
                break;
            case 'associate':
                $('#instit_name').removeClass('turnOff').addClass('turnOn');
                break;
        }
    });

});

要保留您使用的对象文字模式，它会类似于

var joinApp = {
  ready : function() {
    $(function() {

        $('#appType').change(function() {
            switch ($(this).val()) {
                case 'institution':
                    $('#attachFile').addClass('turnOn');
                    break;
                case 'individual':
                    $('#attachFile').removeClass('turnOn').addClass('turnOff');
                    $('#beac_rep, #instit_name').addClass('turnOff');
                    break;
                case 'associate':
                    $('#instit_name').removeClass('turnOff').addClass('turnOn');
                    break;
            }
        });

    });
  }
}

然后你会在你的页面中调用joinApp.ready();

Answer 2

第一个问题是 click() 事件的前两行。选择框必须使用 change() 事件。此外，在下一行，您正在尝试获取所选选项的值。这是使用 val() 获取的，而 text() 检索 和 之间的值。

$('#appType').change(function() {
    var selApp = $(this).val();

最后，我没有看到您通过调用joinApp.ready(); 初始化的位置。这是您文档中的其他地方吗？

Answer 3

当您在选择上使用 .click() 时，选择项目时不会触发它，因为这些项目不在选择框内。尝试使用 .change() 而不是 .click （使用相同的内容）。另外，不要使用这个：

var selApp = $("#appType :selected").text();

这样做：

var selApp = $("#apptype:selected").val();