選擇菜單中的onClick函數未創建選項
[英]onClick function not creating option in select menu
問題描述
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">×</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語言的新手，在這個示例中，基本上我已經創建了一個“運輸方法”頁面。 在“添加交貨地址”鏈接中，單擊時，需要填寫一個地址表格，然后按“添加新”按鈕，所有地址表格數據應出現在選擇菜單選項中，如下圖所示。 但是我做不到。 有人可以給我啟發一下他嗎？ 這將對我有極大的幫助。 謝謝
1 個解決方案
解決方案1
1 2018-08-21 07:47:40
這是線路錯誤，html中不存在id newopt。
var newopt = $('#newopt').val();
使用 JavaScript 創建和復制/復制選擇/選項列表菜單
[英]creating and copy/duplicating a select/option list menu with JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.