0

私は Rails を初めて使用し、Javascript を初めて使用します。
f.select メニューを使用して div クラスの表示スタイルを変更しようとしています。関連する値が選択メニューに設定されている場合にのみ、セカンダリ メニューを表示しようとしています。

フォームは、家具の種類を選択するためのものです。プライマリ セレクトには、テーブル、椅子、ソファの 3 つのオプションがあります。「テーブル」が選択されている場合は、テーブルの種類 (ドロップ リーフ、コーヒー、エンドなど) の別のメニューを表示できるようにしたいと考えています。

私は Select2 gem を使用しています...関連する可能性があります。通常の古い HTML 選択メニューでこれを機能させることはできますが、f.select はできません。ここに私のコード

CSSがあります

#tableObject, #chairObject, #couchObject {
display:none;
}

形

    <%= f.select :furniture, options_for_select([
['FURNITURE TYPES' ,''],

['Chairs' ,'Chairs'],
['Tables' ,'Tables'],
['Couches' ,'Couches']

    ]), {}, { style: 'width:300px', id: 'furnitures'} %>

<div id="couchObject">
    "List of Couches"
</div>

<div id="chairObject">
    "List of Chairs"
</div>

<div id="tableObject">
    "List of Tables"
</div>

JavaScript

<script>
  $('#furnitures').change(function() {
    if ( $(this).val() == 'Chairs') $('#chairObject').css('display', 'block');
    else $('#chairObject').css('display', 'none');

});
   $('#furnitures').change(function() {
    if ( $(this).val() == 'Couches') $('#couchObject').css('display', 'block');
    else $('#couchObject').css('display', 'none');

});

    $('#furnitures').change(function() {
    if ( $(this).val() == 'Tables') $('#tableObject').css('display', 'block');
    else $('#tableObject').css('display', 'none');

});

 </script>

更新: HTML 出力

<div class="select2-container" id="s2id_titles" style="width: 300px;"><a href="javascript:void(0)" class="select2-choice" tabindex="-1">   <span class="select2-chosen" id="select2-chosen-2">Tables</span><abbr class="select2-search-choice-close"></abbr>   <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><label for="s2id_autogen2" class="select2-offscreen"></label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-2" id="s2id_autogen2"></div><select style="width: 300px; display: none;" id="titles" name="participant[title]" tabindex="-1" title=""><option value="">Furnitures</option>
<option value="Tables">Tables</option>
<option value="Chairs">Chairs</option>
<option value="Couches">Couches</option>
</select>
</div>

<div id="couchObject">"List of Couches"</div>
<div id="chairObject">"List of Chairs"</div>
<div id="tableObject">"List of Tables"</div>
4

1 に答える 1

1

試す

$('#furnitures').select2({}).on('change', function () {
    var val = $(this).select2('val');
    $('#couchObject').toggle(val == 'Couches');
    $('#chairObject').toggle(val == 'Chairs');
    $('#tableObject').toggle(val == 'Tables');
});

デモ:フィドル

于 2015-03-16T04:14:09.927 に答える