子下拉列表从选定的父值刷新

Question

我是Ruby的新手，因为下面的代码在更改父值后仍选择了先前的值，因此需要帮助以找到解决方案：

码

这是我的JavaScript代码

 $(function() { var parentFieldId = 'issue_field_72'; var childFieldId = 'issue_field_73'; var isTarget = function(child, parent) { return child.text().indexOf(parent.text()) == 0; } var narrowChildField = function() { var parentSelected = $('#' + parentFieldId + ' > option:selected'); $('#' + childFieldId + ' > option').each(function() { var child = $(this); if (isTarget(child, parentSelected)) { child.show(); child.prop('disabled', false); } else { child.hide(); child.prop('disabled', true); } }); } narrowChildField(); $('#all_attributes').change(function(e) { if (e.target.id == parentFieldId) { narrowChildField(); } }); var _replaceIssueFormWith = replaceIssueFormWith; replaceIssueFormWith = function(html){ _replaceIssueFormWith(html); narrowChildField(); }; }); 

这是我的HTML代码

 <div id="all_attributes" > <select name="issue[custom_field_values][72]" id="issue_field_72" class="list_cf"><option value="">--- Please select ---</option><option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> <option value="F">F</option></select> <select name="issue[custom_field_values][73]" id="issue_field_73" class="list_cf"> <option value="">--- Please select ---</option> <option value="A-1" disabled="" style="display: none;">A-1</option> <option value="A-2" disabled="" style="display: none;">A-2</option> <option value="A-3" disabled="" style="display: none;">A-3</option> <option value="B-1" disabled="" style="display: none;">B-1</option> <option value="B-2" disabled="" style="display: none;">B-2</option> <option value="B-3" disabled="" style="display: none;">B-3</option> <option value="B-4" disabled="" style="display: none;">B-4</option> <option value="C-1" disabled="" style="display: none;">C-1</option> <option value="C-2" disabled="" style="display: none;">C-2</option> <option value="C-3" disabled="" style="display: none;">C-3</option> <option value="C-4" disabled="" style="display: none;">C-4</option> <option value="C-5" disabled="" style="display: none;">C-5</option> <option value="C-6" disabled="" style="display: none;">C-6</option></select> </div> 

输出量

如您所见，我需要此javascript代码的解决方案。

Answer 1

您必须实现两种方法来隐藏选项列表：

1. display: none; 适用于FF，但不适用于Chrome或IE。
2. 您可以将<option>元素附加到隐藏元素。

例：

 $( '#issue_field_72' ).on( 'change', function () { var item = $( this ).find( ':selected' ).attr( 'class' ); $( '#hidden' ).children().appendTo( '#issue_field_73' ); var count = $( '#issue_field_73' ).children( '.' + item ).length; if ( item && count > 0 ) { $( '#issue_field_73' ).children().each( function () { if ( !$( this ).hasClass( item ) && $( this ).val() ) $( this ).appendTo( '#hidden' ) } ); $( '#issue_field_73' ).removeAttr( 'disabled' ) } else { $( '#issue_field_73' ).attr( 'disabled', 'disabled' ) } } ) 

 select { width: 150px } #hidden { display: none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="all_attributes" > <select name="issue[custom_field_values][72]" id="issue_field_72" class="list_cf"> <option value="">Please select</option> <option value="A" class="A">A</option> <option value="B" class="B">B</option> <option value="C" class="C">C</option> <option value="D" class="D">D</option> <option value="E" class="E">E</option> <option value="F" class="F">F</option> </select> <select name="issue[custom_field_values][73]" id="issue_field_73" class="list_cf" disabled="disabled"> <option value="">Please select</option> <option value="A-1" class="A">A-1</option> <option value="A-2" class="A">A-2</option> <option value="A-3" class="A">A-3</option> <option value="B-1" class="B">B-1</option> <option value="B-2" class="B">B-2</option> <option value="B-3" class="B">B-3</option> <option value="B-4" class="B">B-4</option> <option value="C-1" class="C">C-1</option> <option value="C-2" class="C">C-2</option> <option value="C-3" class="C">C-3</option> <option value="C-4" class="C">C-4</option> <option value="C-5" class="C">C-5</option> <option value="C-6" class="C">C-6</option> </select> </div> <div id="hidden"></div>