Php 将值（按用户）添加到从db填充的下拉列表

我正在尝试创建一个“可编辑”下拉列表。我有一个从数据库中的表“city”填充的下拉列表，它工作得很好，但现在我希望用户能够在列表中添加一个新值，如果它不存在的话（我想保存这个值，以便下次它出现在下拉列表中）。 有什么想法吗？ 多谢各位

        <select name="city"> 
    <?php 
    // connecting to DB
    $con=  mysqli_connect('localhost','root','1234','e-sage');
    // enable hebrew input
    mysqli_set_charset($con,'utf8');
    // read the city table from DB
    $sql = mysqli_query($con,"SELECT CityName FROM city");
    while ($row = mysqli_fetch_array($sql)){
    // creating temporary variable for each row
    $city1=$row["CityName"];
    //assigning a value to each option in dropdown list
    echo "<option value=\"$city1\"> $city1 </option>";
    }
    ?>
    </select>

您可以在下拉列表中提供“其他”选项。如果用户选择该选项，则显示一个新的文本框，您可以从中插入数据库。

使用数据列表标记

然后尝试以下方法： 我们同意你已经把所有的城市都安排好了，好吗

<select name="city">
<?PHP
foreach($cities as $city)
{
echo '<option value="'.$city.'">'.$city.'</option>';
}
?>
</select>

<form method="post">
<label for="new_city">New city</label>
<input id="new_city" name="new_city" placeholder="Enter new city name" />
<input type="button" id="addCity" value="Insert city" />
</form>



  <script>
        $(document).on('click','#addCity',function()
                       {

                          var new_city=$("#new_city").val();
                          var e=0;
                           $("[name='city'] option").each(function(i,item)
                                                          {
                                                              var check_city=$(item).val();

                                                              if(check_city==new_city)
                                                              {
                                                                 e++;
                                                              }
                                                              else
                                                              {

                                                              }

                                                          });
                           if(e>0)
                           {
                               alert('The same');
                           }
                           else
                           {
                               /*Submit the form*/
alert('This city is fresh and new');

                           }


                       });
    </script>

新城
$（文档）。在（'单击'，'添加城市'，函数（）上）
{
var new_city=$（“#new_city”）.val（）；
var e=0；
$（“[name='city']选项”）。每个（功能（i，项）
{
var check_city=$（item）.val（）；
如果（检查城市==新城市）
{
e++；
}
其他的
{
}
});
如果（e>0）
{
警惕（“相同”）；
}
其他的
{
/*提交表格*/
警惕（“这座城市是新鲜的和新的”）；
}
});

因此，脚本正在检查该值是否已分配给选项。如果没有-允许提交表格

---

选中此项：

这也是我的选择之一，但后来我决定尝试在不打开新文本框的情况下执行此操作。。。谢谢。那你想怎么做呢？非常感谢，它确实解决了问题！但我仍然想知道我是否可以在同一个文本框中完成，而不需要为新选项的插入增加一个文本框？嗯。。。解决方案是将“addnew”作为选项添加到此选择字段，然后在执行其clicked-javascript提示符后，将AJAX保存的数据保存到DB，然后重新加载选择列表；）