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代码

我的问题是，当我尝试附加它时，它可以正常工作，但是selectpicker不显示任何内容，而当我尝试选择'Other Business'时，输入文本将显示在每一行

$("#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

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' );来获得ID，如下所示：

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

Answer 2

这是工作代码

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(){。这将适用于所有动态添加的输入。

动态添加文本框后如何从selectpicker获取ID

2 个答案: