我是从一个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添加新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>
如果AJAX请求成功,那么你可以只追加选项,在成功的部分是这样的select
:
$("#displayfloor").append("<option value=" + $("#idofinput").val() + " selected>" + $("#idofinput").val() + "</option>");
凡idofinput
是input
框的ID在用户键入了新项目的名称。这将自动选择新追加的选项。