jquery - 在下拉列表更改时显示 Bootstrap 模式表单，并在插入数据库后选择该值

Question

我有一个包含 2 个 Select2 元素的表单。我已编码以在值=其他时在下拉列表更改时显示引导表单。我还成功插入数据库并将值作为下拉 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);