重建选项列表时失去选择选项的焦点

Lose focus of select-option when rebuilding option list

本文关键字：选项 焦点 选择 列表 重建 失去      更新时间：2023-09-26

我正在动态设置我的选择字段的选项。每次表单更改时，都会从 Servlet 接收新数据，并覆盖当前选择。

这里的问题是，如果我选择一个选项，表单会加载 javascript 函数，并且我失去了我的选择/焦点。

var capacityOptionsAsString = "";
for(var i = 0; i < capacityArray.length; i++) {
  capacityOptionsAsString += "<option value='" + capacityArray[i] + "'>" + capacityArray[i] + "</option>";
  console.log('capacity option: ' + capacityOptionsAsString);
}
$("select[name='inptCapacity']").find('option').remove().end().append($(capacityOptionsAsString));

知道如何保留选择吗？

编辑：也许我不够清楚。我想保留选择。所以它必须被验证，如果选择了该选项，如果是，我们必须再次选择它。

只需再次设置焦点：

$("select[name='inptCapacity']").focus();

更新

获取所选选项：

var selected_value = $("select[name='inptCapacity'] option:selected").val()

执行更改

$("select[name='inptCapacity']").find('option').remove().end().append($(capacityOptionsAsString));

再次选择它：

$('select[name='inptCapacity'] option[value="' + selected_value + "]').attr('selected', 'selected');

您完全需要一个 ID 才能选择;)

$('select[name="inptCapacity"]').is(':focus');
$('form[name="formName"] :input').change(function() {
   // keep the select focus always on input change
   $('select[name="inptCapacity"]').focus(); 
});
相关文章：