Question

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

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

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

如果文本框中的值更改为5选项＆＃39;葡萄牙，29天以上＆＃39;和＆＃39;西班牙，29天以上＆＃39;将被重新添加和葡萄牙，1 - 6天＆＃39;和＆＃39;西班牙，1 - 6天＆＃39;将被删除。

    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

以下是整个代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

    } 
    }


});

从基于文本字段的下拉列表中删除和添加字段，Javascript

2 个答案: