這幾天在開發測試平臺，用到了bootstrap的模態框，需要實現在選中某一個select的option時，觸發modal，並修改相應資訊，並提交資訊。

具體程式碼如下：

select控制元件：

                            <div class="input-group">
                                <span class="input-group-addon">payType</span>
                                <div class="select_container" style="width:174px">
                                    <select class="form-control" id="paytype" name="paytype" onchange="selectOnchange(this)">
                                        <option value="pleaseselect">請選擇</option>
                                        <option value="cmb">招商銀行</option>
                                        <option value="jd" >京東支付</option>
                                        <option value="ant">螞蟻花唄</option>
                                        <option value="others">其他</option>
                                    </select>
                                </div>
                            </div>
 

                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel"> requestBody引數</h4>
                                </div>
                                <div class="modal-body">

                                    <label class="textbox-label textbox-label-before" style="width:150px">OrderID</label>
                                    <input id="ModalOrderId" name="ModalOrderId"  style="width:50%"></input>
                                    <br/>
                                    <label class="textbox-label textbox-label-before" style="width:150px">Result</label>
                                    <input id="ModalReuslt" name="ModalReuslt"  style="width:50%"></input>
                                    <br/>
                                    <label class="textbox-label textbox-label-before" style="width:150px">Code</label>
                                    <input id="ModalCode" name="ModalCode"  style="width:50%"></input>
                                    <br/>
                                    <label class="textbox-label textbox-label-before" style="width:150px">CMBOrderID</label>
                                    <input id="ModalCMBOrderID" name="ModalCMBOrderID"  style="width:50%"></input>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">不修改</button>
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">提交</button>
                                </div>
                            </div>
                        </div>
                    </div>
 

    function selectOnchange(obj){
        if(obj.selectedIndex == 1){
            $('#myModal').modal({
                backdrop:false,
                show:true
            });//下邊程式碼為模態框中自動取值部分
            $('#ModalOrderId').val($('#orderid').val());
            $('#ModalReuslt').val('success');
            $('#ModalCode').val(200);
            $('#ModalCMBOrderID').val((new Date()).valueOf());
        }
    }
 

form的元素可通過下面的方式，直接提交資料，簡單可靠。

var formdata = $('#submitForm').serialize();