Javascript 动态加载下拉列表，用户可以添加

我有一个下拉列表，我想动态加载选项。我还想允许用户“添加”他们自己的选项，并将其保存到动态列表中。因此，当任何人返回到该表单时，新选项将出现在列表中。这就是我目前所拥有的——我需要什么？非常感谢您提供的任何信息

以下是我的工作项目：

给出的JSFIDLE I和ajax建议如下：

这是我的下拉列表-它还没有从动态的“可写”列表中拉出来，或者，也许它可以

    <input type="hidden" name="action" value="<?php if($edit) echo 'edit';else echo 'insert';?>">
    <input type="hidden" name="event_id" value="<?php if($edit) echo $event_data['id'];else echo '0';?>">
    <div class="col-md-6 col-sm-6 col-xs-12">
    <div class="form-group" >
    <label for="event_title">Surgeon Name <span class="required">*</span>       </label>
    <select name="event_title" id="event_title" class="form-control required">
    <option value="">Select a Surgeon</option>
    <option value="BERASI"> BERASI</option>
    <option value="BERGHOFF"> BERGHOFF</option>
    <option value="BIGGS"> BIGGS</option>
    <option value="BORUS"> BORUS</option>
    <option value="BURKE"> BURKE</option>
    <option value="CANNONE"> CANNONE</option>
    </select>
    </div>
    <label for="event_title">Add a Surgeon</label>
    <input type="text" class="addingElement">
    <button class="addingButton" >Add</button>
    </div>

---

您需要存储他们添加的项目。最简单的方法是使用
localStorage
。我已经修改了您的代码，以存储他们添加到名为
options
的
localStorage
项中的元素，然后在页面加载时，我正在读取该
localStorage
项并填充列表

由于SO不允许在沙盒代码环境中读取
localStorage
，因此这里有一个fiddle-
您要附加的新选项应该如下所示

Var newoption=
“”+newElement+“”

我建议如果您想在插入新记录后将其存储在数据库中以重新加载整个列表--删除旧选项并加载整个列表--
您需要存储他们在
localStorage.setItem（）
（或cookies或其他）中添加的元素以存储其条目，然后使用
localStorage.getItem（）
当页面加载以检索任何存储的项目时。不确定如何执行此操作，您能给我举个例子吗？
    $(document).ready(function(){
    $('.addingButton').on('click', function(){
    var newElement = $('.addingElement').val();
    console.log(newElement);
    var newOption = $('<option>').attr('value', newElement).text(newElement);
    $('#event_title').append(newOption);
    $.ajax({
            url: 'link/to/my/index.php',
        method: 'POST',
        data: {
                'newElement': newElement
        }, success: function(data) {
            // the new element was successfully added to the database
            console.log('success ! ');
        },
        error: function(error) {
            //there was an error while adding the new element.
            console.error('there was an error : ' + error);
        }
      })
    })
 });