从下拉菜单中删除和添加字段，基于文本框，Javascript

Question

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

我已经尝试了下面的jsfiddle删除项目，但我需要能够添加项目，如果值更改并添加更多的条件。

我还希望所有的选项都需要与天数过多或过少时保持分开。例如，如果用户输入30以下将显示在下拉列表中： 巴西 中国 葡萄牙，1 - 2天 葡萄牙，7 - 28天 西班牙，1 - 2天 西班牙，7 - 28天

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

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>

Answer 2

这是我工作的一个解决方案，而不是最优雅，但它似乎很好地工作：

https://jsfiddle.net/pele09/Lrjrraqs/4/

Amount: <input type="text" id="amountofdays" /> 
<br><br> 
<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) <= (6)) { 
     var selectobject=document.getElementById("destination") 
     for (var i=0; i<selectobject.length; i++){ 

     $('select[name*="destination"] option[value="Portugal, 7 – 28 days"]').hide(); 
     $('select[name*="destination"] option[value="Spain, 7 – 28 days"]').hide(); 
     $('select[name*="destination"] option[value="Portugal, 1 – 6 days"]').show(); 
     $('select[name*="destination"] option[value="Spain, 1 – 6 days"]').show(); 

    } 
    } 

}); 


$("#amountofdays, #destination").change(function() { 
    var amountofdaystotal = document.getElementById("amountofdays").value; 

    if ((amountofdaystotal) >= (6)) { 
     var selectobject=document.getElementById("destination") 
     for (var i=0; i<selectobject.length; i++){ 

     $('select[name*="destination"] option[value="Portugal, 7 – 28 days"]').show(); 
     $('select[name*="destination"] option[value="Spain, 7 – 28 days"]').show(); 
     $('select[name*="destination"] option[value="Portugal, 1 – 6 days"]').hide(); 
     $('select[name*="destination"] option[value="Spain, 1 – 6 days"]').hide(); 
    } 
    } 

}); 


$("#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++){ 

     $('select[name*="destination"] option[value="Portugal, 29+ days"]').hide(); 
     $('select[name*="destination"] option[value="Spain, 29+ days"]').hide(); 

    } 
    } 

}); 

$("#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++){  

    $('select[name*="destination"] option[value="Portugal, 29+ days"]').show(); 
    $('select[name*="destination"] option[value="Spain, 29+ days"]').show(); 
    $('select[name*="destination"] option[value="Portugal, 7 – 28 days"]').hide(); 
     $('select[name*="destination"] option[value="Spain, 7 – 28 days"]').hide(); 

    } 
    } 


});