У меня есть пример, который я сделал с помощью JQuery 1.4
вот html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Formularseite</title>
<link href="style3.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-1.7.js" ></script>
<script type="text/javascript" src="js/meineScripts.js" ></script>
</head>
<body>
<?php
if (isset($_POST['senden']))
{
}
else { ?>
<form action="formular.php" method="POST" enctype="Multipart/Formdata">
<fieldset>
<legend>Demo1 JQuery</legend>
<label for="auswahl1">Auswahl treffen:</label>
<input class="grouptrigger" type="checkbox" id="auswahl1" name="daten[0]" value="true"/>
<br/>
<div class="auswahl1 hide_on_start">
<label for="eineZeile">Text:</label>
<input type="text" id="eineZeile" name="daten[1]" value=""/>
</div>
<input class="grouptrigger" type="radio" id="auswahl2a" name="daten[2]" value="1" />
<label for="auswahl2a">Option 1</label>
<input class="grouptrigger" type="radio" id="auswahl2b" name="daten[2]" value="2" />
<label for="auswahl2b">Option 2</label>
<input class="grouptrigger" type="radio" id="auswahl2c" name="daten[2]" value="3" />
<label for="auswahl2c">Option 3</label>
<div class="hide_on_start auswahl2a">
<label for="eineZeile2a">Text Opt1:</label>
<input type="text" id="eineZeile2a" name="daten[3]" value=""/>
</div>
<div class="hide_on_start auswahl2b">
<label for="eineZeile2b">Text Opt2:</label>
<input type="text" id="eineZeile2b" name="daten[4]" value=""/>
</div>
<div class="hide_on_start auswahl2c">
<label for="eineZeile2c">Text Opt3:</label>
<input type="text" id="eineZeile2c" name="daten[5]" value=""/>
</div>
<br/>
<label for="auswahl3">Auswahl treffen:</label>
<select name="daten[6]" id="auswahl3" class="grouptrigger">
<option value="0" >Bitte wählen:</option>
<option value="1" id="auswahl3a" >Eintrag</option>
<option value="2" id="auswahl3b" >anderer Eintrag</option>
<option value="3" id="auswahl3c" >weiterer Eintrag</option>
</select>
<div class="hide_on_start auswahl3a">
<label for="eineZeile3a">Text 1:</label>
<input type="text" id="eineZeile3a" name="daten[7]" value=""/>
</div>
<div class="hide_on_start auswahl3b">
<label for="eineZeile3b">Text 2:</label>
<input type="text" id="eineZeile3b" name="daten[8]" value=""/>
</div>
<div class="hide_on_start auswahl3c">
<label for="eineZeile3c">Text 3:</label>
<input type="text" id="eineZeile3c" name=""/>
</div>
</fieldset>
<p class="font20px"><input type="submit" name="senden" value="Abschicken"></p>
</form>
<?php } ?>
</body></html>
вот js:
// Add RegExp Filter
// From: http://james.padolsey.com/javascript/regex-selector-for-jquery/
$.expr[':'].regex = function(elem, index, match) {
var matchParams = match[3].split(','),
validLabels = /^(data|css):/,
attr = {
method: matchParams[0].match(validLabels) ?
matchParams[0].split(':')[0] : 'attr',
property: matchParams.shift().replace(validLabels,'')
},
regexFlags = 'ig',
regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
return regex.test(jQuery(elem)[attr.method](attr.property));
}
$(document).ready(function() {
$('body').addClass('js');
// Toggeling groups
$(".grouptrigger").change( function()
{
var toCheck = ":not(:checked)";
if ($(this).hasClass('inverse'))
toCheck = ":checked";
var hideGroup = "."+this.id;
// for radio buttons
alert (" "+$(this).attr('type')+' '+this.id);
if ($(this).attr('type') == "radio")
{
var hideGroupParent=hideGroup.substr(0,hideGroup.length-1);
try { $("div:regex(class, .*"+hideGroupParent+".*)").hide(0); } catch (err) {}
if ($("#" + this.id).is(":checked"))
$(hideGroup).show(0);
}
// for select lists
else if ($(this).attr('type') == "select-one")
{
var hideGroupParent=this.id;
hideGroup = '.'+$('#' + this.id + ' :selected').attr('id');
try { $("div:regex(class, .*"+hideGroupParent+".*)").hide(0); } catch (err) {}
$(hideGroup).show(0);
}
else
// for checkboxes
{
if ($("#" + this.id).is(toCheck))
try { $(hideGroup).hide(100); } catch (err) {}
else
$(hideGroup).show(100);
}
});
$(".grouptrigger").change();
});
Проблема с JQuery 1.7 заключается в том, что
alert (" "+$(this).attr('type')+' '+this.id);
дает 'undefined' для выбора вместо "select-one", как в случае с JQuery 1.4. Это ошибка или есть другой способ обнаружения элемента select?