Question

我尝试实施此功能：

                var select = document.getElementById(key);
                var temp = select.value;
                select.options.length = 0; // clear out existing items
                for (var i = 0; i < data.length; i++) {
                    select.options.add(new Option(data.Value, data.Key))
                }
                select.value = temp;

如果没有这样的值，我想为选择的选项设置一些默认值。

Answer 1

您想要获得选择和重置它的价值是正确的。您可以使用jQuery来实现您想要的结果。

请注意，如果旧值不可用，select的值将设置为null。

$("button").on("click", function() {
  var def = "4. Option";
  var temp = $("select").val();
  var select = $("select");

  select.empty();
  for (i = 2; i <= 10; i++) {
    $("<option>").text(i + ". Option").appendTo(select);
  }
  select.val(temp);

  if (select.val() == null)
    select.val(def);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>1. Option</option>
  <option>2. Option</option>
  <option>3. Option</option>
  <option>4. Option</option>
  <option>5. Option</option>
</select>

<button>Clear and Fill Select</button>

Answer 2

这是一个名为init_select

的简单函数

清除选择标记 - 记住之前选择的选项
如果先前选择的项目不在新选项列表中，则会选择所需的选项（这是default_opt）参数 - 如果先前的项目在列表中，它将忽略default_opt参数并使用先前选择的项目。

这里的演示（之前选择的项目不在列表中，但default_opt是IN列表）

＆＃13;

function init_select(id,data,default_opt) {
  var select = document.getElementById(id);
  var temp = select.value;
  select.innerHTML="";
  for (var i = 0; i < data.length; i++) {
    select.options.add(new Option(data[i]))
  }
  if (data.indexOf(temp) < 0 && data.indexOf(default_opt)>=0 ) {
    select.value = default_opt;
    console.log('this is select',select.value,default_opt,select);
  } else if (data.indexOf(temp) >= 0){
    //select.options.add(new Option(temp));
    select.value = temp;
    console.log(select.value,data.indexOf(temp));
}
}
init_select('key',["New Value", "New Value2", "New Value3", "New Value4"],"New Value2")

＆＃13;

<select id="key">
  <option>year1</option>
  <option>year2</option>
  <option>year3</option>
</select>

＆＃13;

这里的演示（之前选择的项目IN列表和default_opt是IN列表，忽略默认选项并选择之前选择的项目）

＆＃13;

function init_select(id,data,default_opt) {
  var select = document.getElementById(id);
  var temp = select.value;
  select.innerHTML="";
  for (var i = 0; i < data.length; i++) {
    select.options.add(new Option(data[i]))
  }
  if (data.indexOf(temp) < 0 && data.indexOf(default_opt)>=0 ) {
    select.value = default_opt;
    console.log('this is select',select.value,default_opt,select);
  } else if (data.indexOf(temp) >= 0){
    //select.options.add(new Option(temp));
    select.value = temp;
    console.log(select.value,data.indexOf(temp));
}
}
init_select('key',["New Value", "New Value2", "New Value3", "New Value4","year1"],"New Value2")

＆＃13;

<select id="key">
  <option>year1</option>
  <option>year2</option>
  <option>year3</option>
</select>

＆＃13;

如何更新选项的选项，但保留以前选择的选项？

2 个答案: