How do i bind multiple objects in Jquery? I am trying to say when you select opstion 'Cinema 4D (.c4d)' Show the Dropdown renderer_used[] but also show the feild renderer_version.
The first two feild i need to show but the last two i need to "hide" untill the opstion 'Cinema 4D (.c4d)' is selected. I have managed to hide the first drop down but not sure how to bind the second feild name=renderer_version
Appreciate if anyone knows this, as i am still learning.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.6.2.js" type="text/javascript"></script>
<style>
.soft {
float: left;
margin-right: 32px;
width: 300px;
}
.soft-version {
float: left;
position: relative;
width: 300px;
margin-right: 32px;
}
.render-used {
float: left;
position: relative;
width: 300px;
margin-right: 32px;
}
.render-version {
float: left;
position: relative;
width: 300px;
}
.main_content {
margin: auto;
width: 100%;
}
</style>
</head>
<body>
<div class="main_content">
<fieldset class="fes-el select software soft">
<div class="fes-label">
<label for="fes-software">Software<span class="edd-required-indicator">*</span></label>
</div>
<div class="fes-fields">
<select name="software[]" data-required="1" data-type="select">
<option value="">- select -</option>
<option value="Revit Family (.rfa)" selected="selected">Revit Family (.rfa)</option>
<option value="3D Studio (.3ds)">3D Studio (.3ds)</option>
<option value="AutoCAD (.dwg)">AutoCAD (.dwg)</option>
<option value="Autodesk FBX (.fbx)">Autodesk FBX (.fbx)</option>
<option value="Cinema 4D (.c4d)">Cinema 4D (.c4d)</option>
<option value="DXF (.dxf)">DXF (.dxf)</option>
<option value="Lightwave (.lwo, .lw, .lws)">Lightwave (.lwo, .lw, .lws)</option>
<option value="Maya (.ma, .mb)">Maya (.ma, .mb)</option>
<option value="OBJ (.obj)">OBJ (.obj)</option>
<option value="Rhino (.3dm)">Rhino (.3dm)</option>
<option value="Sketchup (.skp)">Sketchup (.skp)</option>
<option value="Softimage (.hrc, .xsi)">Softimage (.hrc, .xsi)</option>
<option value="3D Studio Max (.max)">3D Studio Max (.max)</option>
<option value="Additional Textures">Additional Textures</option>
<option value="Blender (.blend)">Blender (.blend)</option>
<option value="Bryce (.br5, .obp)">Bryce (.br5, .obp)</option>
<option value="Collada (.dae)">Collada (.dae)</option>
<option value="DirectX (.X)">DirectX (.X)</option>
<option value="High-res Render">High-res Render</option>
<option value="IGES (.ige, .igs, .iges)">IGES (.ige, .igs, .iges)</option>
<option value="Inventor Assembly (.iam)">Inventor Assembly (.iam)</option>
<option value="Luxology Modo (.lxo, .lxl)">Luxology Modo (.lxo, .lxl)</option>
<option value="Maxwell Scene (.mxs)">Maxwell Scene (.mxs)</option>
<option value="OpenFlight (.flt)">OpenFlight (.flt)</option>
<option value="Poser (.pz3, .pp2)">Poser (.pz3, .pp2)</option>
<option value="Previews">Previews</option>
<option value="Renderman (.rib, .slc, .sl, .slo)">Renderman (.rib, .slc, .sl, .slo)</option>
<option value="Revit Models (.rvt)">Revit Models (.rvt)</option>
<option value="Shockwave 3D (.w3d)">Shockwave 3D (.w3d)</option>
<option value="Silo (.sia)">Silo (.sia)</option>
<option value="Stereolithography (.stl)">Stereolithography (.stl)</option>
<option value="Textures">Textures</option>
<option value="VRML (.wrl, .wrz)">VRML (.wrl, .wrz)</option>
<option value="Vue (.vue)">Vue (.vue)</option>
<option value="Zbrush (.ztl)">Zbrush (.ztl)</option>
<option value="Other">Other</option>
<option value="SolidWorks (.sldprt, .sldasm, .slddrw)">SolidWorks (.sldprt, .sldasm, .slddrw)</option>
<option value="Cheetah3D (.jas)">Cheetah3D (.jas)</option>
<option value="Alias/WaveFront Material (.mtl)">Alias/WaveFront Material (.mtl)</option>
<option value="Universal 3D (.u3d)">Universal 3D (.u3d)</option>
<option value="Leaderwerks (.gmf)">Leaderwerks (.gmf)</option>
<option value="X file (.x)">X file (.x)</option>
<option value="DarkBASIC Object (.dbo)">DarkBASIC Object (.dbo)</option>
<option value="Torque (.dts)">Torque (.dts)</option>
<option value="MilkShape 3D (.ms3d)">MilkShape 3D (.ms3d)</option>
<option value="Beyond3D (.b3d)">Beyond3D (.b3d)</option>
<option value="Truevision (.tga)">Truevision (.tga)</option>
<option value="Truevision (.tga)">Truevision (.tga)</option>
<option value="Solid Edge (.asm)">Solid Edge (.asm)</option>
<option value="Autodesk Inventor (.ipt)">Autodesk Inventor (.ipt)</option>
<option value="Step (.stp)">Step (.stp)</option>
<option value="Alibre/Geomagic Part (.ad_prt)">Alibre/Geomagic Part (.ad_prt)</option>
<option value="Alibre/Geomagic Assm (.ad_asm)">Alibre/Geomagic Assm (.ad_asm)</option>
<option value="Alibre/Geomagic Drawing (.ad_dwg)">Alibre/Geomagic Drawing (.ad_dwg)</option>
<option value="Alibre/Geomagic Sheetmetal (.ad_smp)">Alibre/Geomagic Sheetmetal (.ad_smp)</option>
<option value="Alibre/Geomagic Design Package (.ad_pkg)">Alibre/Geomagic Design Package (.ad_pkg)</option>
<option value="Marvelous Designer Garment (.zpac)">Marvelous Designer Garment (.zpac)</option>
<option value="Marvelous Designer Project (*.ZPrj, .ZPrj)">Marvelous Designer Project (*.ZPrj, .ZPrj)</option>
<option value="Marvelous Designer Avatar (.avt)">Marvelous Designer Avatar (.avt)</option>
<option value="Marvelous Designer Avatar (.avt)">Marvelous Designer Avatar (.avt)</option>
<option value="Marvelous Designer Pose (.pos)">Marvelous Designer Pose (.pos)</option>
<option value="Jewelry Cad (.jcad, .jcd)">Jewelry Cad (.jcad, .jcd)</option>
<option value="Unity 3D (.unitypackage)">Unity 3D (.unitypackage)</option>
<option value="Additive Manufacturing (.amf)">Additive Manufacturing (.amf)</option>
<option value="X3D (.x3d)">X3D (.x3d)</option>
<option value="3D Points File (.pts)">3D Points File (.pts)</option>
<option value="Material Libraries (.mat)">Material Libraries (.mat)</option>
<option value="Agisoft Photoscan (.ply)">Agisoft Photoscan (.ply)</option>
<option value="3D Coat (.3b)">3D Coat (.3b)</option>
<option value="AC3D (.ac)">AC3D (.ac)</option>
<option value="Artlantis (.atl, .atla, .atlo)">Artlantis (.atl, .atla, .atlo)</option>
<option value="Crytek Geometry Animation (.cga)">Crytek Geometry Animation (.cga)</option>
<option value="Crytek Geometry Format (.cgf)">Crytek Geometry Format (.cgf)</option>
<option value="Crytek Character (.chr)">Crytek Character (.chr)</option>
<option value="Crytek Skinned Render mesh (.skin)">Crytek Skinned Render mesh (.skin)</option>
<option value="UnrealEngine (.uasset)">UnrealEngine (.uasset)</option>
<option value="Unity Prefab Format (.prefab)">Unity Prefab Format (.prefab)</option>
<option value="Terragen (.tgo)">Terragen (.tgo)</option>
<option value="Houdini (.hda, .hip, .bgeo, .geo, .bclip, .clip)">Houdini (.hda, .hip, .bgeo, .geo, .bclip, .clip)</option>
<option value="PDF (.pdf)">PDF (.pdf)</option>
</select>
</div>
</fieldset>
<fieldset class="fes-el text software_version soft-version">
<div class="fes-label">
<label for="fes-software_version">Version<span class="edd-required-indicator">*</span></label>
</div>
<div class="fes-fields">
<input class="textfield edd-required-indicator" id="software_version" type="text" data-required="1" data-type="text" name="software_version" placeholder="" value="" size="">
</div>
</fieldset>
<fieldset class="fes-el select renderer_used render-used">
<div class="fes-label">
<label for="fes-renderer_used">Renderer Used<span class="edd-required-indicator">*</span></label>
</div>
<div class="fes-fields">
<select name="renderer_used[]" data-required="1" data-type="select">
<option value="">- select -</option>
<option value="Default Scanline" selected="selected">Default Scanline</option>
<option value="Mental Ray">Mental Ray</option>
<option value="Maxwell ">Maxwell </option>
<option value="V-Ray ">V-Ray </option>
<option value="Advanced Renderer">Advanced Renderer</option>
<option value="Thea ">Thea </option>
<option value="Octane ">Octane </option>
<option value="Corona">Corona</option>
</select>
</div>
</fieldset>
<fieldset class="fes-el text renderer_version render-version">
<div class="fes-label">
<label for="fes-renderer_version">Renderer Version<span class="edd-required-indicator">*</span></label>
</div>
<div class="fes-fields">
<input class="textfield edd-required-indicator" id="renderer_version" type="text" data-required="1" data-type="text" name="renderer_version" placeholder="" value="" size="40">
</div>
</fieldset>
</div>
<script>
var selectedRenderer = $('select[name="renderer_used[]"], select[name="renderer_version"]');
selectedRenderer.hide();
$('select[name="software[]"]').change(function() {
var softwareSelected = $(this).find('option:selected').val();
softwareSelected === 'Cinema 4D (.c4d)' ? selectedRenderer.show() : selectedRenderer.hide();
});
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire