Bootstrap form select не правильно работает

187
04 мая 2019, 14:00

Почему select не правильно отобразился? Хотя он и там и там один и тот же.

    <div class='box box-theme box-form'>
  <div class='box-header with-border'><h4 class='box-title'>_{SPLITTERS}_ : %WELL%</h4></div>
  <div class='box-body'>
    <form name='CABLECAT_COMMUTATION_ADD_MODAL' id='form_CABLECAT_COMMUTATION_ADD_MODAL' method='post'
          class='form form-horizontal ajax-submit-form'>
      <input type='hidden' name='index' value='$index'/>
      <input type='hidden' name='operation' value='ADD'/>
      <input type='hidden' name='entity' value='SPLITTER'/>
      <input type='hidden' name='ID' value='%COMMUTATION_ID%'/>
      <input type='hidden' name='COMMUTATION_ID' value='%COMMUTATION_ID%'/>
      <input type='hidden' name='CONNECTER_ID' value='%CONNECTER_ID%'/>
      <div class='form-group'>
        <label for='SPLITTER_ID' class='control-label col-md-3'>_{SPLITTER}_</label>
        <div class='col-md-9' id='SPLITTER_ID'>
          %SPLITTERS_SELECT%
        </div>
      </div>
    </form>
  </div>
  <div class='box-footer'>
    <input type='submit' form='form_CABLECAT_COMMUTATION_ADD_MODAL' id='CABLECAT_SPLITTER_ADD_BTN' class='btn btn-primary' name='submit'
           value='%SUBMIT_BTN_NAME%'>
  </div>
</div>
<div id='splitter_form_wrapper'></div>
<script>
  jQuery(function () {
    Events.off('AJAX_SUBMIT.form_CABLECAT_COMMUTATION_ADD_MODAL');
    Events.on('AJAX_SUBMIT.form_CABLECAT_COMMUTATION_ADD_MODAL', function(){
      location.reload();
    });
    var select                = jQuery('div#SPLITTER_ID').find('select');
    var splitter_form_wrapper = jQuery('#splitter_form_wrapper');
    var submit_add_form_btn = jQuery('input#CABLECAT_SPLITTER_ADD_BTN');
    var option_add = jQuery('<option></option>', {'value': 'add'}).text('_{CREATE}_');
    select.append(option_add);
    updateChosen();
    select.on('change', function () {
      if (jQuery(this).val() === 'add') {
        splitter_form_wrapper.load('?get_index=cablecat_splitters&header=2&add_form=1' +
            '&WELL_ID=%WELL_ID%&COMMUTATION_ID=%COMMUTATION_ID%' + '&TEMPLATE_ONLY=1', null, function () {
          // Element was replaced, so need update reference
          splitter_form_wrapper = jQuery('#splitter_form_wrapper');
          submit_add_form_btn.prop('disabled', true);
          submit_add_form_btn.addClass('disabled');
          // Change button text
          // splitter_form_wrapper.find('input[type="submit"]').val('_{CREATE}_');
          // Send form in AJAX
          jQuery('#form_CABLECAT_SPLITTER').submit(ajaxFormSubmit);
          // When form sent, refresh page
          Events.off('AJAX_SUBMIT.form_CABLECAT_SPLITTER');
          Events.on('AJAX_SUBMIT.form_CABLECAT_SPLITTER', function (result) {
            if (result.MESSAGE && result.MESSAGE.message_type === 'info') {
              var new_splitter_type_select = splitter_form_wrapper.find('#TYPE_ID');
              var type_id   = new_splitter_type_select.val();
              var type_name = new_splitter_type_select.find('option[value="' + type_id + '"]').text();
              select.append(
                  jQuery('<option></option>', {'value': result.MESSAGE.INSERT_ID})
                    .text(type_name + '_#' + result.MESSAGE.INSERT_ID)
              );
              renewChosenValue(select, result.MESSAGE.INSERT_ID);
              splitter_form_wrapper.empty();
              submit_add_form_btn.prop('disabled', false);
              submit_add_form_btn.removeClass('disabled');
            }
          });
        });
      }
      else {
        splitter_form_wrapper.empty();
      }

    })
  });
</script>
Answer 1

У вас используется плагин select. Судя по коду (и по виду):

var select = jQuery('div#SPLITTER_ID').find('select');
...
select.append(option_add);
...
select.on('change', function () {

вы применили его только к элементу #SPLITTER_ID, а остальные так и остались обычными селектами

READ ALSO
FormData() input[type=file]

FormData() input[type=file]

https://codepenio/Galtran/pen/BGYRoX?editors=1011

182
В чем разница в объектах? [дубликат]

В чем разница в объектах? [дубликат]

На данный вопрос уже ответили:

131
Извлечь данные при парсинге Node.js

Извлечь данные при парсинге Node.js

При парсинге я получаю ответ в таком виде:

121
Отображать children при v-html (vue)

Отображать children при v-html (vue)

В своем vue-компоненте я использую следующую конструкцию:

177