Обновление дочернего раскрывающегося списка от выбранного родительского значения - PullRequest
Новая
       28

Обновление дочернего раскрывающегося списка от выбранного родительского значения

0 голосов
/ 21 мая 2018

Я новичок в Ruby, так как в приведенном ниже коде все еще выбрано предыдущее значение после того, как я изменил родительское значение, мне нужна помощь, чтобы найти решение по этому вопросу:

CODE

вот мой код 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>

Вывод

enter image description here

Как видите, вывод мне нуженрешение для этого кода JavaScript.

1 Ответ

0 голосов
/ 21 мая 2018

Вы должны реализовать два метода для сокрытия списка опций:

  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>
...