动态添加下拉菜单并排除选定的选项

正如我在标题中提到的，我试图构建动态下拉菜单。一旦用户从列表选项中选择，相同的选项将从其他下拉列表中排除（禁用）。动态添加下拉菜单并排除选定的选项

到目前为止，我已经构建了添加/删除功能。但我不知道从哪里开始解决所选选项的问题。

$('.multi-field-wrapper').each(function() { 
    var $wrapper = $('.multi-fields', this); 
    $(".add-field", $(this)).click(function(e) { 
     $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); 
    }); 




    $('.multi-field .remove-field', $wrapper).click(function() { 
     if ($('.multi-field', $wrapper).length > 1) 
      $(this).parent('.multi-field').remove(); 
    }); 
}); 

var defaultTime = "<option selected disabled>Choose time</option><option>Whole day</option>"; 
var i, b, a, clock = ""; 
var min = ["00", "15", "30", "45"]; 

for(a = 0; a <= 1; a++){ 
    if(a == 0){ 
     for (i = 0; i <= 11; i++) { 
      if(i <= 9) { 
       for (b = 0; b < min.length; b++) { 
        clock += "<option>" + "0" + i + ":" + min[b] + " AM" + "</option>"; 
       } 
      }else{ 
       for (b = 0; b < min.length; b++) { 
        clock += "<option>" + i + ":" + min[b] + " AM" + "</option>"; 
       } 
      } 
     } 
    }else{ 
     for (i = 0; i <= 11; i++) { 
      if(i <= 9) { 
       for (b = 0; b < min.length; b++) { 
        clock += "<option>" + "0" + i + ":" + min[b] + " PM" + "</option>"; 
       } 
      }else{ 
       for (b = 0; b < min.length; b++) { 
        clock += "<option>" + i + ":" + min[b] + " PM" + "</option>"; 
       } 
      } 
     } 
    } 
} 

document.getElementById("clock").innerHTML = defaultTime + clock;

任何想法，我应该在哪里开始呢？任何帮助都会有所帮助。

谢谢！

来源

2016-02-04 sqarf

可以禁用JavaScript中的选择：http://stackoverflow.com/questions/2155909/how-can-i-disable-an-option-in-a-select-based-on-its-value-in-javascript – JamieC

也是，而不是建立一个字符串，你可能更好使用'var myOption = document.createElement（'option'）'。那么你可以像这样添加属性：'myOption.id ='选项-1'，然后在你完成后将它放在你的html中。 – JamieC

@squrf：更新你的小提琴：https://jsfiddle.net/k4do7Lg2/1/ – Apb

你必须做出的选择的选择对象为：

 var foo = []; 
      $('.times :selected').each(function(i, selected){ 
      foo[i] = $(selected).text(); 
     });

这只是设置选项后禁用与在foo对象

 $.each(foo, function(entry){ 
      console.log(foo[entry]); 
      $(".times option:contains('"+foo[entry]+"')").attr("disabled","disabled"); 
     });

小提琴链接值：https://jsfiddle.net/k4do7Lg2/1/

来源

2016-02-04 11:16:21 Apb

动态添加下拉菜单并排除选定的选项

回答

相关问题