Как получить идентификатор из selectpicker после добавления текстовых полей динамически

Question

$("#oriother").on('change', function() {

  if ($(this).val() === 'Other Business') {
    $("#orihdother").removeClass('notvisible');
  }

  $("#orilocation").prop('disabled', false);
  $("#orilocation").selectpicker('refresh');
});


function addline() {
  var line = $('<div class="col-md-6"><div class="form-group"><label ><?= $vendorqualotherbusiness ?></label><select class="form-control txtvendorqualotherbusiness" id="copyother<%=count++%>" style="cursor:pointer;"><option>1</option><option>2</option><option>3</option><option>Other Business</option></select></div></div><div class="col-md-6"><div class="col-md-11" style="padding-left: 0 !important;"><div class="form-group"><label ><?= $vendorquallocation ?></label><select class="form-control selectpicker txtvendorquallocation" multiple data-live-search="true" id="copylocation<%=count++%>" style="cursor:pointer;" disabled required><option>Auto Complete</option><option>2</option><option>3</option><option>4</option></select></div></div><div class="col-md-1"><i class="glyphicon glyphicon-plus-sign" onclick="addline();" style="position: relative;top: 30px;right: 15px;font-size: 25px; cursor: pointer;"></i></div></div><div class="col-md-6" style="margin-right: 1px;"><div class="form-group"><input type="text" class="form-control hdvendorqualotherbusiness notvisible" id="copyhdother<%=count++%>" required></div></div>');

  $('.newline').append(line);

  $('select[id^="copyother"]').on('change', function() {
    if ($(this).val() === 'Other Business') {
      $('input[id^="copyhdother"]').removeClass('notvisible');
    }

    $('select[id^="copylocation"]').prop('disabled', false);
    $('select[id^="copylocation"]').selectpicker('refresh');
  });
}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row">

  <div class="col-md-6">
    <div class="form-group">
      <label>Vendor Qualification</label>
      <select class="form-control txtvendorqualotherbusiness" id="oriother" style="cursor:pointer;">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>Other Business</option>
      </select>
    </div>
  </div>
  <div class="col-md-6">
    <div class="col-md-11" style="padding-left: 0 !important;">
      <div class="form-group">
        <label>Location</label>
        <select class="form-control selectpicker txtvendorquallocation" multiple data-live-search="true" id="orilocation" style="cursor:pointer;" disabled required>
          <option>Auto Complete</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
    </div>
    <div class="col-md-1">
      <i class="glyphicon glyphicon-plus-sign" onclick="addline();" style="position: relative;top: 30px;right: 15px;font-size: 25px; cursor: pointer;"></i>
    </div>
  </div>

  <div class="col-md-6" style="margin-right: 1px;">
    <div class="form-group">
      <input type="text" class="form-control hdvendorqualotherbusiness notvisible" id="orihdother" required>
    </div>
  </div>

  <div class="newline"></div>

</div>

Это мой HTML-код

Ну, моя цель, когда я пытаюсь выбрать вариант из обычноговыберите опцию, будет активирован следующий селектор выбора, и когда я попытаюсь выбрать «Прочие вопросы» из обычного варианта выбора, вводимый текст будет отображаться

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row">

    <div class="col-md-6">
        <div class="form-group">
            <label >Vendor Qualification</label>
            <select class="form-control txtvendorqualotherbusiness" id="oriother" style="cursor:pointer;">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>Other Business</option>
            </select>
        </div>
    </div>
    <div class="col-md-6">
        <div class="col-md-11" style="padding-left: 0 !important;">
            <div class="form-group">
                <label >Location</label>
                <select class="form-control selectpicker txtvendorquallocation" multiple data-live-search="true" id="orilocation" style="cursor:pointer;" disabled required>
                    <option>Auto Complete</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </div>
        </div>
        <div class="col-md-1">
            <i class="glyphicon glyphicon-plus-sign" onclick="addline();" style="position: relative;top: 30px;right: 15px;font-size: 25px; cursor: pointer;"></i>
        </div>
    </div>

    <div class="col-md-6" style="margin-right: 1px;">
        <div class="form-group">
            <input type="text" class="form-control hdvendorqualotherbusiness notvisible" id="orihdother" required>
        </div>
    </div>

    <div class="newline"></div>

</div>

Этомой код javascript

моя проблема в том, что когда я пытаюсь добавить его, он работает правильно, но селектор выбора ничего не показывает, и когда я пытаюсь выбрать «Прочие вопросы» ,входной текст будет отображаться для каждой отдельной строки

$("#oriother").on('change', function(){

        if($(this).val() === 'Other Business'){
            $("#orihdother").removeClass('notvisible');
        }

        $("#orilocation").prop('disabled', false);
        $("#orilocation").selectpicker('refresh');
    });


function addline(){ 
    var line = $('<div class="col-md-6"><div class="form-group"><label ><?= $vendorqualotherbusiness ?></label><select class="form-control txtvendorqualotherbusiness" id="copyother<%=count++%>" style="cursor:pointer;"><option>1</option><option>2</option><option>3</option><option>Other Business</option></select></div></div><div class="col-md-6"><div class="col-md-11" style="padding-left: 0 !important;"><div class="form-group"><label ><?= $vendorquallocation ?></label><select class="form-control selectpicker txtvendorquallocation" multiple data-live-search="true" id="copylocation<%=count++%>" style="cursor:pointer;" disabled required><option>Auto Complete</option><option>2</option><option>3</option><option>4</option></select></div></div><div class="col-md-1"><i class="glyphicon glyphicon-plus-sign" onclick="addline();" style="position: relative;top: 30px;right: 15px;font-size: 25px; cursor: pointer;"></i></div></div><div class="col-md-6" style="margin-right: 1px;"><div class="form-group"><input type="text" class="form-control hdvendorqualotherbusiness notvisible" id="copyhdother<%=count++%>" required></div></div>');

    $('.newline').append(line);

    $('select[id^="copyother"]').on('change', function(){
        if($(this).val() === 'Other Business'){
            $('input[id^="copyhdother"]').removeClass('notvisible');
        }

        $('select[id^="copylocation"]').prop('disabled', false);
        $('select[id^="copylocation"]').selectpicker('refresh');
    });
}

Answer 1

Вот рабочий код

function addline(){ 
    var line = $('<div class="col-md-6"><div class="form-group"><label ><?= $vendorqualotherbusiness ?></label><select class="form-control txtvendorqualotherbusiness" id="copyother<%=count++%>" style="cursor:pointer;"><option>1</option><option>2</option><option>3</option><option>Other Business</option></select></div></div><div class="col-md-6"><div class="col-md-11" style="padding-left: 0 !important;"><div class="form-group"><label ><?= $vendorquallocation ?></label><select class="form-control selectpicker txtvendorquallocation" multiple data-live-search="true" id="copylocation<%=count++%>" style="cursor:pointer;" disabled required><option>Auto Complete</option><option>2</option><option>3</option><option>4</option></select></div></div><div class="col-md-1"><i class="glyphicon glyphicon-plus-sign" onclick="addline();" style="position: relative;top: 30px;right: 15px;font-size: 25px; cursor: pointer;"></i></div></div><div class="col-md-6" style="margin-right: 1px;"><div class="form-group"><input type="text" class="form-control hdvendorqualotherbusiness notvisible" id="copyhdother<%=count++%>" required></div></div>');

    $('.newline').append(line);

    $(document).on('change', 'select[id^="copyother"]', function(){
        if($(this).val() === 'Other Business'){
            $('input[id^="copyhdother"]').removeClass('notvisible');
        }

        $('select[id^="copyrowlocation"]').prop('disabled', false);
        $('select[id^="copyrowlocation"]').selectpicker('refresh');
    });
}

Вместо $('select[id^="copyother"]').on('change', function(){ просто используйте это $(document).on('change', 'select[id^="copyother"]', function(){.Это будет работать для всех динамически добавляемых входов.

Answer 2

let num = Math.ceil( Math.random() * 100); // random number between 1 and 100

$('body').append('<select id="copyother-' + num + '"><option>1</option><option>2</options>');

$('select[id^="copyother"]').on('change', function() {
  let id = $(this).prop('id');
  console.log(id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

После того, как вы добавили свои элементы динамически и выбрали их с помощью jQuery, вы можете получить идентификатор, используя .prop( 'id' ); как в:

$( 'select[id^="copyother"]' ).on( 'change', function(){
    let id = $(this).prop( 'id );
    console.log( id );
});