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

Posted 2023-05-09

【中文标题】在下拉更改时显示 Bootstrap 模态表单，并在插入数据库后选择该值

【英文标题】：Show Bootstrap modal form on dropdown change and get that value selected after inserting into Database

【发布时间】：2020-02-20 23:56:45

【问题描述】：

我有一个包含 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>

【问题讨论】：

您能否为您的两个下拉菜单提供HTML？

@RyanWilson 检查更新的 html 代码

下拉的change事件会发生什么？

【参考方案1】：

也许您的change 回调应该查看event.target 属性并将其id 属性保存为表单上的data-triggered_by（或类似）属性。然后您的表单将知道涉及哪个选择元素。

然后就是这样

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