0

这是我的代码：http: //jsfiddle.net/AcfnR/19/

使用 optgroup，我在下拉菜单中创建了两个类别：请求新机架和修复/更换现有机架。我希望在页面加载时隐藏 id="description" textarea 和 id="photo" 文件输入。目前，我将这两个包装在 id="damage_div" 的 div 中，假设隐藏一个 div 更容易。当用户选择修复/替换现有机架选项组下的任何选项时，应显示两个隐藏元素。如果用户返回并将他的选择更改为请求 new racks optgroup 中的某些内容，则该字段将再次隐藏。另外，我如何使显示功能成为向下滑动过渡并隐藏向上滑动过渡？

我已经查看了其他 stackoverflow 问题和谷歌的一些示例，但未能使它们工作：http: //jsfiddle.net/bryanjamesross/RF9Fg/1/

这些示例将一个选择选项链接到一个输入字段，我想将许多选择选项链接到相同的两个输入字段（或包装它们的 div）。

HTML：自行车架请求 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>       
</head>

<body>
<div data-role="page" data-theme="d" id="bike-rack-request" class="page">
 <div data-role="header" data-theme="d">
 </div><!--header-->
<div data-role="content" data-inset="true" class="content">
   <div style="float:left;"><h3 data-theme="a">Bike Rack Request</h3></div>
   <div style="float:right; padding-bottom:0px;"></div>
  <form id="rackForm" action="rack-form.php" method="post" data-ajax="false">

   <fieldset data-role="fieldcontain" class="ui-hide-label">
    <label for="Business_Name">Name of business:</label>
    <input type="text" data-theme="c" name="Business_Name" id="Business_Name" value=""  placeholder="Name of business" data-mini="true"/>
   </fieldset><!--fieldcontain-->

   <fieldset data-role="fieldcontain" class="ui-hide-label">
    <label for="Contact_Name">Contact name:</label>
    <input type="text" data-theme="c" name="Contact_Name" id="Contact_Name" value=""  placeholder="Contact name" data-mini="true" />
   </fieldset><!--fieldcontain-->

   <fieldset data-role="fieldcontain" class="ui-hide-label">
    <label for="email">Email:</label>
    <input type="email" data-theme="c" name="email" id="email" value="" placeholder="Email" data-mini="true"/>
   </fieldset><!--fieldcontain-->

   <fieldset data-role="fieldcontain" class="ui-hide-label">
    <label for="Street_Address">Address:</label>
    <input type="text" data-theme="c" name="Street_Address" id="Street_Address" value="" placeholder="Address of rack location" data-mini="true" />
   </fieldset><!--fieldcontain-->

   <fieldset data-role="fieldcontain"  class="ui-hide-label">
    <label for="Number_of_Racks" class="select">Select rack request</label>
    <select name="Number_of_Racks" data-theme="c" id="Number_of_Racks" data-native-menu="true" data-mini="true">
            <option value="" data-placeholder="true">Select rack request</option>
           <optgroup label="Request new rack(s)">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5+</option>
           </optgroup>
           <optgroup label="Repair/replace existing rack"> 
            <option value="Seperating from concrete">Seperating from concrete</option>
            <option value="Missing footing screws">Missing footing screws</option>
            <option value="Rack has been cut">Rack is cut</option>
            <option value="Rack has been smashed">Rack is smashed</option>
            <option value="Rack was stolen">Rack was stolen</option>
            <option value="Other">Other damage</option>
           </optgroup> 
    </select>
   </fieldset>

   <div id="damage_div"><!-- next two div will be hidden at first -->
       <fieldset data-role="fieldcontain" id="damagefield" class="ui-hide-label">
        <label for="description">Describe the damage</label>
        <textarea type="textarea" data-theme="b" name="description" id="description" class="required" maxlength="1000" value="" placeholder="Describe the damage" data-mini="true" /></textarea>
       </fieldset><!--fieldcontain-->

       <fieldset data-role="fieldcontain" id="photofield" class="photofield">
        <label for="photo">&nbsp;Photo of damaged rack: </label>
        <input type="file" accept="image/*" capture="camera" data=theme="b" name="photo" id="photo" placeholder="Photo of damage">
       </fieldset><!--fieldcontain-->
   </div><!--end of hidden div wrapper-->

   <button type="submit" data-theme="d" name="submit" value="submit-value" data-mini="true" data-rel="popup">Submit</button>
  </form>
 </div><!--content-->
 <div data-role="footer" data-theme="none" class="footer">   
 </div><!--footer-->
</div><!--bike-rack-request-->

​</p>

Javascript：

$('#Number_of_Racks').change(function() {
    var value = $(this).val();
    if (value == 'Other') {
    $('#damage_div').show('fast');
    }
    else {
    $('#damage_div').hide('fast');
    }
});​
4

0 回答 0