jquery - 添加新选项以选择列表，无需刷新页面

Question

我有一个从 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);
    }
  })
 });

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

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

Answer 1

Add new option to select list without refreshing the page

要使用 jquery 添加新的选项，请使用:

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

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

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

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

$("#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>