私は（JQueryを学びながら）次のことをプログラムしようとしています：
いろいろな要素が入った形があります。選択メニュー項目で行われた選択に基づいて、1つ以上の要素を非表示または表示する必要があります。私はこれまでのところスクリプトとしてこれを持っています：
// 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; }
これまでのところ、これは機能していません。誰かが私に与えることができるどんな助けにも感謝します。
デイブ