时间戳

首页 > 解决方案 > 添加新选项以选择列表而不刷新页面

jquery - 添加新选项以选择列表而不刷新页面

问题描述

我有一个从 Mysql 表填充的下拉选择列表。

<select name="displayfloor" class="datatext" id="displayfloor">
<option></option>
<option value="new">Add new floor</option> // ADD NEW OPTION
<?php do { ?>
<option value="<?php echo $row_SignageFloors['FloorName']?>"><?php echo $row_SignageFloors['FloorName'];?></option>
<?php
} while ($row_SignageFloors = mysql_fetch_assoc($SignageFloors));
$rows = mysql_num_rows($SignageFloors);
if($rows > 0) {
mysql_data_seek($SignageFloors, 0);
$row_SignageFloors = mysql_fetch_assoc($SignageFloors);
}
?>
</select>

在列表中是一个创建新楼层的选项，当它被选中时，它会打开一个模式表单，可以在其中输入新的楼层号码。提交此表单时，它会使用 Ajax 脚本将新的 ada 写入 Mysql 表，见下文.. 这很好用。

$('#floor_insert').on('click', function(e){
  e.preventDefault();
  var form = $('form')[3];
  var formData = new FormData(form);
  $.ajax({
    url: "insert_new_floor_ajax.php",
    data: formData,
    method:"POST",
    cache: false,
    contentType: false,
    processData: false,
    success: function(data) {
      $('#add_floor_modal').modal("hide")    //alert(data);
    }
  })
 });

有没有一种方法可以在不刷新页面的情况下刷新选择列表。我在这里和其他地方查看了许多问题，但似乎没有一个可以处理这种情况。

非常感谢您的帮助和时间。

标签： jquery

解决方案

添加新选项以选择列表而不刷新页面

要使用 jquery 添加新内容option，请使用：

$("#selectId").append("<option>" + textofoption + "</option>");

如果您想从输入中获取新文本：

var textofoption = $("#input").val()

要选择新选项，请在selected创建时添加 - 这也可以在添加选项后通过更改选项.val()的选择或设置checked来实现，但最容易在创建时添加：

$("#selectId").append("<option selected>" + textofoption + "</option>");

例子：

$("#b").click(function() {
  var opt = $("#newopt").val();
  $("#s").append("<option selected>" + opt + "</option>");
  $("#newopt").val("");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='s'>
  <option>Option 1</option>
</select>
<hr/> Enter new option: <input type='text' id='newopt' /><button id='b' type='button'>click me</button>

推荐阅读