Question

我有一个下拉列表我想动态加载选项。我还想让用户“添加”他们自己的选项，并将其保存到该动态列表中。因此，当任何人返回该表单时，新选项将在列表中。这是我到目前为止 - 我需要什么？非常感谢任何信息！

这是我的工作项目： http://www.leskofolio.com/calendar/cal/gcal-script/index

我给出的jsfiddle ajax建议在这里： https://jsfiddle.net/o0qc8wvc/5/

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

    <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>

有人告诉我，我可以使用Ajax来做这件事，但他并没有帮助我使用“额外的PHP”。这是他的ajax代码：

    $(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);
        }
      })
    })
 });

我的选择框再次起作用，但我无法保存用户添加。我错过了什么或做错了什么？再次，非常感谢任何信息！

Answer 1

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

由于SO不允许在沙盒代码环境中读取localStorage，因此这里有一个小提琴 - https://jsfiddle.net/o0qc8wvc/7/

Answer 2

您要附加的新选项应如下所示

Var newoption ="<option value='"+ newElement +"'>" + newElement + "</option>"

我建议如果你想在插入新记录后将其存储在数据库中以重新加载整个列表 - 删除旧选项并加载整个列表 -

使用用户添加功能动态加载下拉列表

2 个答案: