0

ここに私のコードがあります: http://jsfiddle.net/AcfnR/19/

optgroup を使用して、ドロップダウン メニューに 2 つのカテゴリを作成しました。新しいラックのリクエストと既存のラックの修理/交換です。ページの読み込み時に id="description" テキストエリアと id="photo" ファイル入力を非表示にしたいと思います。現在、1 つの div を非表示にする方が簡単であると仮定して、これら 2 つを id="damage_div" の div にラップしています。ユーザーが既存のラックの修理/交換オプトグループの下にあるオプションのいずれかを選択すると、2 つの非表示の要素が表示されます。ユーザーが戻って、新しいラックの optgroup リクエスト内の何かに選択を変更すると、フィールドは再び非表示になります。また、表示機能をスライドダウン遷移にし、非表示機能をスライドアップ遷移にするにはどうすればよいですか?

他のスタックオーバーフローの質問とグーグルからいくつかの例を確認しましたが、それらを機能させることができませんでした: http://jsfiddle.net/bryanjamesross/RF9Fg/1/

これらの例では、1 つの選択オプションを 1 つの入力フィールドにリンクしていますが、多くの選択オプションを同じ 2 つの入力フィールド (またはそれらをラップする 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