2017-06-09 26 views
0

這裏我的要求是這樣的,當用戶選擇選項從下拉菜單比選擇值應該在另一個下拉

$(document).ready(function() { 
 
    getDetailAmc(investor_id); 
 
    $("#add-amc").on('click', function() { 
 

 
    count++; 
 
    $("#new-amc-block").append("<div id='div_" + count + "'><div class='container'><div class='row'><div class='col-sm-4 form-group'><label>Select AMC:</label><select class='form-control Amcselect' id='Amc_select_" + count + "'></select><span class='error hidden' id='Amcselect_error_" + count + "'></span></div><div class='col-sm-4 form-group'><label>Folio No:</label><input type='text' placeholder='Enter Folio Number Here..' class='form-control folionotxt' id='folio_no_" + count + "'><span class='error hidden' id='Foliono_error_" + count + "'></span></div><div class='col-sm-4 form-group'><i class='fa fa-times fa-2x font-icon curs iconcolor deleteamc' title='Delete Amc' id='delete_amc_" + count + "'></i></div></div></div></div>"); 
 

 

 
    PopulateSelectAmc(AmcArray); 
 
    changesoption(); 
 
    }); 
 

 
}); 
 

 
function getDetailAmc(investor_id) { 
 

 
    $.ajax({ 
 
    type: "POST", 
 
    url: "Folio_Mapping1.aspx/getAmc", 
 
    data: JSON.stringify({ 
 
     investor_id: investor_id 
 
    }), 
 
    contentType: "application/json;charset=utf-8", 
 
    dataType: "json", 
 
    success: OnSuccess, 
 
    error: OnErrorCall 
 
    }); 
 

 
    function OnSuccess(response) { 
 

 

 
    var result = JSON.parse(response.d); 
 
    if (result == "") { 
 
     $("#InvId-error").removeClass("hidden"); 
 
     $("#InvId-error").text("Invalid Investor Id"); 
 
     $(".Amcselect").empty(); 
 
    } else { 
 
     $("#InvId-error").addClass("hidden"); 
 
     MapAmcDetail(result); 
 

 
    } 
 

 
    function MapAmcDetail(result) { 
 
     AmcArray = []; 
 
     AmcArray = $.map(result, function(el) { 
 
     return { 
 
      "AMC_NAME": el.AMC_NAME 
 

 
     } 
 
     }); 
 

 
     PopulateSelectAmc(AmcArray); 
 

 
    } 
 

 
    function PopulateSelectAmc(AmcArray) { 
 

 
     var option = ''; 
 

 
     option += '<option value="Select">Select AMC</option>'; 
 
     for (var i = 0; i < AmcArray.length; i++) { 
 

 
     option += '<option value="' + AmcArray[i].AMC_NAME + '"id=a_' + i + '">' + AmcArray[i].AMC_NAME + '</option>'; 
 
     } 
 

 
     $('.Amcselect').append(option); 
 

 
     function changesoption() { 
 
     var value; 
 
     value = $(".Amcselect option:first").val(); 
 
     if (value) { 
 
      $(this).data('previous', value); 
 
      $('select').not(this).find('option[value="' + value + '"]').hide(); 
 
     } 
 

 
     /* PopulateSelectAmc(AmcArray);*/ 
 
     $(".Amcselect").on('change', function() { 
 

 
      prevValue = $(this).data('previous'); 
 
      $('select').not(this).find('option[value="' + prevValue + '"]').show(); 
 

 
      value = $(this).val(); 
 
      if (value) { 
 
      $(this).data('previous', value); 
 
      $('select').not(this).find('option[value="' + value + '"]').hide(); 
 
      } 
 

 
     }); 
 
     }
<html> 
 

 
<body> 
 
    <form id="form1" runat="server"> 
 
    <div class="form-group container margincus"> 
 
     <div class="row"> 
 
     <div class="col-lg-4"> 
 
      <label for="investorId">Investor ID:</label> 
 
      <input type="text" class="form-control" id="Invid" placeholder="Enter InvestorId"><span class="error hidden" id="InvId-error"></span> 
 
     </div> 
 
     <div class="col-lg-4"> 
 
      <i class="fa fa-plus-square fa-2x font-icon curs" title="Add More Amc" id="add-amc"></i> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-sm-4 form-group"> 
 
      <label>Select AMC:</label> 
 
      <select class="form-control Amcselect" id="Amc_select_0"></select><span class="error hidden" id="Amcselect_error_0"></span> 
 
     </div> 
 
     <div class="col-sm-4 form-group"> 
 
      <label>Enter Folio No:</label> 
 
      <input type="text" placeholder="Example:1234567891,3456789234...." class="form-control folionotxt" id="folio_no_0"><span class="error hidden" id="Foliono_error_0"></span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div id="new-amc-block"> 
 

 
    </div> 
 
    <div class="container"> 
 
     <button class="btn btn-success btn-default" id="sendemail" type="button">Send Email</button> 
 
    </div> 
 
    </form> 
 
</body> 
 

 
</html>
我創建加號按鈕不可見添加下拉許多想在下拉選項來dynamically.here我的要求是這樣的,當用戶從下拉菜單中選擇選項時,應該不會在另一個下拉菜單中看到。我能夠實現這個功能,但這裏面臨的問題是,當用戶點擊加號按鈕並添加一些下拉菜單並從下拉菜單中選擇選項時比在其他下拉列表中看不到的那個選定的值是 已添加,但是當用戶再次單擊加號按鈕並添加了一些下拉菜單,而不是所有選項都進入dr如此之前選擇的選項不會從下拉菜單中隱藏。

回答

0

你爲什麼不寫一個輸入(這裏下拉改變功能)類似

function RemoveOptionsFromOthers(val){ 
$('select :not('+this+')').find(option['value="val"]').remove(); 
} 

然後調用函數中的所有optionchange事件

+0

沒有我,當我再次改變比以前我的下拉值價值sholud進入下拉這就是爲什麼我的代碼工作。我只是有問題,當我點擊添加按鈕比再次所有數組值都進入下拉列表 – perry

相關問題