テキストフィールドに基づいてドロップダウンからフィールドを削除して追加します。

Question

テキストボックス内の値（数値）に基づいてドロップダウンからフィールドを削除して追加できます。

私はアイテムを削除する次のjsfiddleを試みましたが、値が変更されて条件が追加された場合はアイテムを追加する必要があります。

また、日数が多すぎたり少なすぎたりする場合は、すべてのオプションを別にする必要があります。例えば、ユーザは、次のドロップダウンに表示されるでしょう30を入力した場合： ブラジル 中国 ポルトガル、1から6日 ポルトガル、7から28日 スペイン、1から6日 スペイン、7から28日

テキストボックスの値が5に変更された場合、 'Portugal、29+ days'、 'Spain、29+ days'のオプションが再追加され、 'Portugal、1-6 days'、 'Spain、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>

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(); 

    } 
    } 


});