처음 사용하는 자바 스크립트에서 선택한 항목을 기준으로 두 번째 드롭 다운에서 항목을 제거하십시오.

Question

드롭 다운이 4 회 있으며 수동으로 채 웁니다.

이제 첫 번째 드롭 다운 옵션을 선택할 때 두 번째 세 번째 네 번째 드롭 다운에서 해당 항목이나 옵션을 제거 할 수있는 javac 스크립트를 추가하려고합니다.

동일한 흐름이 2, 3, 4 등으로 진행됩니다.

내 코드를 제공하고 있지만 지금까지 제대로 작동하지 않습니다.

첫 번째 래더를 선택하면 첫 번째 옵션이 선택되고 두 번째, 세 번째 및 네 번째 드롭 다운에서 항목이 제거됩니다.

function RemoveItems(){ 
    var List1 = document.getElementById("ddlSortField"); 
    var sortList1 = List1.options[List1.selectedIndex].text; 

    var List2 = document.getElementById("ddlSortField2"); 
    var sortList2 = List2.options[List2.selectedIndex].text; 
    List2.options.remove(sortList1); 

    var List3 = document.getElementById("ddlSortField3"); 
    var sortList3 = List3.options[List3.selectedIndex].text; 
    List3.options.remove(sortList2); 

    var List4 = document.getElementById("ddlSortField4"); 
    var sortList4 = List4.options[List4.selectedIndex].text; 
    List4.options.remove(sortList3); 
} 

Answer 1

입니다 생성자 : so

function removeItems() { 

>  var List1 = document.getElementById("ddlSortField"); 
>  var sortList1 = List1.options[List1.selectedIndex].text; 

그래서 sortList1은 문자열입니다.

>  var List2 = document.getElementById("ddlSortField2"); 
>  var sortList2 = List2.options[List2.selectedIndex].text; 
>  List2.options.remove(sortList1); 

옵션 컬렉션의 remove있어서, 상기 옵션들 중 하나의 지표 인 하나의 매개 변수를 사용. sortList1 값이이고 몇 개의 옵션이 얼마나 많은지 표시하지 않았습니다. 목록 2에 표시됩니다. 옵션 모음은 실시간으로 제공되므로 옵션을 제거하면 다른 옵션의 색인이 0에서 options.length - 1까지 연속되도록 조정할 수 있습니다.

Answer 2

사용 jQuery를 귀하의 옵션 값이 같은 동일해야합니다 귀하의 HTML에서 옵션을

$(document).ready(function(){ 
    $('#ddlSortField').change(function(){ 
     var index = $("#ddlSortField option:selected").val(); 

     $('#ddlSortField2 option:eq(' + index + ')').remove(); 
     $('#ddlSortField3 option:eq(' + index + ')').remove(); 
     $('#ddlSortField4 option:eq(' + index + ')').remove(); 
}); 
}); 

주를 제거합니다 : jsFiddle :

<select id="ddlSortField"> 
    <option value="1">test1</option> 
    <option value="2">test2</option> 
    <option value="3">test3</option> 
</select> 

<select id="ddlSortField1"> 
    <option value="1">test1</option> 
    <option value="2">test2</option> 
    <option value="3">test3</option> 
</select> 

Answer 3

당신은 같은 코드를 사용할 수 있습니다.

기본적으로, 당신은 먼저 각 목록에 change 이벤트를 바인딩하고 값을 변경할 때이 내가 @Muhammad 오마이 르의 약간 다른 일을했습니다

Answer 4

후 모든 목록에서 이러한 요소를 ... 숨기기 하나는 좀 더 동적입니다. , 관례, 예약되어

> function RemoveItems(){ 

변수 이름은 대문자로 시작하는이 여기

var removeSelection = function(select) { 
    $('select').filter(':not(#' + select.attr('id') + ')').each(function() { 
     var index = select.find(':selected').index(); 
     $(this).find('option:eq(' + index + ')').remove(); 
    }); 
}; 

$(function() { 
    $('select').change(function() { 
     removeSelection($(this)); 
    }); 
}); 

jQuery를되고 주의는 그것의 jsfiddle 코드에서 http://jsfiddle.net/cA3F9/