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

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>

​