javascript - 基于文本字段、Javascript 从下拉列表中删除和添加字段

Question

我希望能够根据文本框中的值(数字)从下拉列表中删除和添加字段。

我尝试了以下删除项目的 jsfiddle，但如果值发生变化并添加更多条件，我需要能够将项目添加回去。

我还希望所有选项都需要分开，除非天数太多或太少。例如，如果用户输入 30，下拉列表中将显示以下内容:巴西中国葡萄牙，1 – 6 天葡萄牙，7 – 28 天西类牙，1 – 6 天西类牙，7 – 28 天

如果文本框中的值更改为 5，则会重新添加“葡萄牙，29 天以上”和“西类牙，29 天以上”选项以及“葡萄牙，1 – 6 天”和“西类牙，1 – 6 天” days' 将被删除。

    Amount: <input type="text" id="amountofdays"  />
    <select id="destination" name="destination" size="1">
        <option value="">&nbsp;</option>
        <option value="Brazil">Brazil</option>
        <option value="China">China</option>
        <option value="Portugal, 1 – 6 days">Portugal, 1 – 6 days</option>
        <option value="Portugal, 7 – 28 days">Portugal, 7 – 28 days</option>
        <option value="Portugal, 29+ days">Portugal, 29+ days</option>
        <option value="Spain, 1 – 6 days">Spain, 1 – 6 days</option>
        <option value="Spain, 7 – 28 days">Spain, 7 – 28 days</option>
        <option value="Spain, 29+ days">Spain, 29+ days</option>
     </select>
    $("#amountofdays, #destination").change(function () {
    var amountofdaystotal = document.getElementById("amountofdays").value;
    if ((amountofdaystotal) <= (29)) {
       var selectobject=document.getElementById("destination")
       for (var i=0; i<selectobject.length; i++){
      if (selectobject.options[i].value == 'Portugal, 29+ days'  || 
    selectobject.options[i].value == 'Spain, 29+ days')
    selectobject.remove(i);

    } 
    }


});

这是 jsfiddle: https://jsfiddle.net/pele09/xpg6sfga/8/

请问有人能帮忙吗？

谢谢

Answer 1

这是完整的代码片段

var list=[
          {place:"Portugal","min":1,"max":6},
          {place:"Brazil","min":7,"max":28},
          {place:"Spain","min":1,"max":6}];

  $("#amountofdays").change(function () {

    select = document.getElementById('destination');
    select.innerHTML="";
    var days = document.getElementById("amountofdays").value;
 
    
    for (var i = 0; i<list.length; i++){
      if(list[i].min<=days&&list[i].max>=days){
         var opt = document.createElement('option');
         opt.value = list[i].place+', '+list[i].min+ '-'+list[i].max+' days';
         opt.innerHTML = list[i].place+', '+list[i].min+ '-'+list[i].max+' days';
         select.appendChild(opt);
    }
   
}
    
});

Days: <input type="text" id="amountofdays"  />
<br><br>
<select id="destination" name="destination" size="1">
   <option value="">Please Enter number of days</option>
</select>