如何更新选择的选项，但保持先前选择的选项？

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; 

在案件没有这样的价值了，我想设置selcted选择一些默认值。

Answer 1

这是一个叫做简单的函数init_select

• 明确选择标记 -remembers如果先前选择的项目之前选择
• 选项项目不在新选项列表中。它将选择你想要的选项（这是default_opt）参数 - 如果之前的项目在列表中，它将忽略default_opt参数并使用先前选择的项目。这里

演示（不在列表中，但default_opt先前选择的项目在名单）

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")

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

演示这里（先前所选的项目，列表和default_opt为列表，默认选项被忽略并且选择先前选择的项目）

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")

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

Answer 2

您的选择和重置价值的想法是正确的。你可以用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>