添加新的选项,选择不刷新页面

问题描述 投票:0回答:2

我是从一个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>

在列表中创建一个新的地板的选择和被选择时,它打开一个模式窗体可以在其中输入新的楼号。当这个表单提交将其写入新的ADA于使用Ajax的脚本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
2个回答
1
投票

添加新的选项,选择不刷新页面

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

1
投票

如果AJAX请求成功,那么你可以只追加选项,在成功的部分是这样的select

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

idofinputinput框的ID在用户键入了新项目的名称。这将自动选择新追加的选项。

© www.soinside.com 2019 - 2024. All rights reserved.