Question

    function getOption(){
    var select = document.getElementById("dynamic-select");
    if(select.options.length > 0) {
        var option = select.options[select.selectedIndex];
        alert("Text: " + option.text + "\nValue: " + option.value);
    } else {
        window.alert("Select box is empty");
    }
}

function addOption(){
    var select = document.getElementById("dynamic-select");
    select.options[select.options.length] = new Option('New Element', '0', false, false);
}

<!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete Address Form</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

    <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/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        .pac-container {
            z-index: 10000 !important;
        }
    </style>
  </head>

  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h2>Shipping Method</h2>
                <form>
                    <div class="form-group">
                        <div class="radio">
                            <label>
                                <input type="radio" name="optradio" checked>Deliver To *</label>
                        </div>
                    </div>



                    <div class="form-group">

                        <select id="dynamic-select">
                            <option value="None">Select Shipping</option>

                        </select>
                    </div>

                    <div class="form-group">
                        <a data-toggle="modal" data-target="#myModal">Add Delivery Address</a>
                    </div>

                    <!-- Modal -->
                    <div class="modal fade" id="myModal" role="dialog">
                        <div class="modal-dialog">

                            <!-- Modal content-->
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h4 class="modal-title"><span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Add your Delivery Details</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="panel panel-primary">
                                        <div class="panel-heading">
                                          <h3 class="panel-title">Address</h3>
                                        </div>
                                        <div class="panel-body">
                                         <input id="autocomplete" placeholder="Enter your address"
                                            onFocus="geolocate()" type="text" class="form-control">
                                            <br>
                                         <div id="address">
                                            <div class="row">
                                               <div class="col-md-6">
                                                  <label class="control-label">Street address</label>
                                                  <input class="form-control" id="street_number">
                                               </div>
                                               <div class="col-md-6">
                                                  <label class="control-label">Route</label>
                                                  <input class="form-control" id="route">
                                               </div>
                                            </div>
                                            <div class="row">
                                               <div class="col-md-6">
                                                  <label class="control-label">City</label>
                                                  <input class="form-control field" id="locality">
                                               </div>
                                               <div class="col-md-6"> 
                                                  <label class="control-label">State</label>
                                                  <input class="form-control" id="administrative_area_level_1">
                                               </div>
                                            </div>
                                            <div class="row">
                                               <div class="col-md-6">
                                                  <label class="control-label">Zip code</label>
                                                  <input class="form-control" id="postal_code">
                                               </div>
                                               <div class="col-md-6">
                                                  <label class="control-label">Country</label>
                                                  <input class="form-control" id="country">
                                               </div>
                                            </div>
                                         </div>
                                         <button type="submit" onclick="addOption()">Add NEW</button>
                                      </div>
                                        </div>            
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

  </body>
</html>

我是Java语言的新手，在这个示例中，基本上我已经创建了一个“运输方法”页面。在“添加交货地址”链接中，单击时，需要填写一个地址表格，然后按“添加新”按钮，所有地址表格数据应出现在选择菜单选项中，如下图所示。但是我做不到。有人可以给我启发一下他吗？这将对我有极大的帮助。谢谢

Answer 1

这是线路错误，html中不存在id newopt。

var newopt = $('#newopt').val();

选择菜单中未创建onClick函数选项

1 个答案: