Question

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

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

我已经回顾了其他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-->

使用Javascript：

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

jquery mobile：根据下拉菜单选择显示/隐藏文本输入

0 个答案: