Показать модальную форму Bootstrap при изменении выпадающего списка и выбрать это значение после вставки в базу данных

Question

У меня есть форма с 2 элементами Select2. Я кодировал для отображения формы начальной загрузки при изменении выпадающего списка, когда значение = другое. Я также успешно вставляю в базу данных и возвращаю значение как опцию drop2 select2.

Но я хочу знать, что Как я могу выбрать это значение, выбранное только в том раскрывающемся списке, с которым оно было запущено, означает Dropdown1 или dropdown2. потому что оба раскрывающихся списка имеют одинаковые значения.

<script>
$(document).ready(function(){   
    $("#myform").submit(function(event){
        submitForm();
        return false;
    });
});

function submitForm(){
     $.ajax({
        type: "POST",
        url: "<?php echo base_url().'index.php?purchaser/create_firm/';?>",
        data: $('form#myform').serialize(),
        dataType: "json", 
         success: function (data) {
var newOption = new Option(data.name, data.id, true, true);
$('#select1').append(newOption1).trigger('change');         
                       $("#myModal").modal('hide');
                        }, 
        error: function(xhr, status, error) {
              alert(xhr.responseText);
            }
    });
}
</script>

Обновлен код HTML

<div class="form-group">
<div class="col-md-3">
<label>From </label>
<select class="form-control select2" style="width:100%;" name="from" id="select1" required >
<option value="">Select Seller Firm</option>
<?php $query=$this->db->get('firm_master')->result_array(); foreach($query as $row):?>
<option value="<?php echo $row['id']?>"><?php echo ucwords($row['name'].', '.$row['district']);?></option>
<?php endforeach;?>
<option value="other">Other</option>
</select>
</div>
<div class="col-md-3">
<label>To</label>
<select class="form-control select2" style="width:100%;"  name="to" id="select2" required >
<option value="">Select Seller Firm</option>
<?php $query=$this->db->get('firm_master')->result_array(); foreach($query as $row):?>
<option value="<?php echo $row['id']?>"><?php echo ucwords($row['name'].', '.$row['district']);?></option>
<?php endforeach;?>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label>Purchase Order Number</label>
<select class="form-control select3" name="order_number" id="po" style="width:100%;">
<option value="">Select Purchase Order</option>
<?php $query=$this->db->get('purchase_order')->result_array(); foreach($query as $row):?>
<option value="<?php echo $row['id']?>"><?php echo ucwords($row['pinvoice_no']);?></option>
<?php endforeach;?>
</select>
</div>  
<div class="col-md-3">
<label>Weight (in KG)</label>
<input type="number" class="form-control" id="weight" name="weight" required />
</div>  
</div>  
<div class="form-group">
<div class="col-md-3">
<label>Rate (Per KG)</label>
<input type="text" class="form-control" name="rate" id="rate" required />
</div>  
<div class="col-md-3">
<label>Due Date</label>
<input type="text" class="form-control datepicker" name="due_dated" />
</div>                              
</div>
<div class="form-group">

<div class="col-md-3">
<label>Mediator Name</label>
<select class="form-control select2" style="width:100%;"  name="firm" required >
<?php $query=$this->db->get('firm_master')->result_array(); foreach($query as $row):?>
<option value="<?php echo $row['id'];?>"><?php echo ucwords($row['name']);?></option>
<?php endforeach;?></select>
</div>  
<div class="col-md-3">
<label>Material</label>
<input type="text" class="form-control" name="material" required />
</div>                          
</div>

Answer 1

Возможно, ваш обратный вызов change должен взглянуть на свойство event.target и сохранить его атрибут id как атрибут data-triggered_by (или аналогичный) в форме. Тогда ваша форма будет знать, какой элемент выбран.

Тогда это просто что-то вроде

var select = $(`#{$("form#myform").data("triggered_by")}`);
select.val(data.id);