動態添加下拉菜單並排除選定的選項

正如我在標題中提到的，我試圖構建動態下拉菜單。一旦用戶從列表選項中選擇，相同的選項將從其他下拉列表中排除（禁用）。動態添加下拉菜單並排除選定的選項

到目前爲止，我已經構建了添加/刪除功能。但我不知道從哪裏開始解決所選選項的問題。

$('.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

動態添加下拉菜單並排除選定的選項

回答

相關問題