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

如果AJAX请求成功，则可以在成功部分中将选项附加到select上，

$("#displayfloor").append("<option value=" + $("#idofinput").val() + " selected>" + $("#idofinput").val() + "</option>");

其中idofinput是input框的ID，用户在其中输入新项的名称。这将自动选择新添加的选项。

Answer 2

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

要使用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>

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

2 个答案: