jquery 특정 값을 선택하면 항목 옵션을 사용하지 않음

Question

jquery 문제가 있습니다. 선택한 값이 "interestingValue"인 경우 실제로 모든 항목을 부모로부터 제외한 모든 항목에서 사용하지 않으려합니다.

<select name="menufoo" id="menufoo" class="menufooClass"> 
     <option value="interestingValue">bar foo</option> 
     <option value="foo1">foo abc1</option> 
     <option value="bar1">foo abc1</option> 
    </select> 

    <select name="menufoo2" id="menufoo2" class="menufooClass2"> 
     <option value="interestingValue2">bar foo2</option> 
     <option value="foo2">foo abc2</option> 
     <option value="bar2">foo abc2</option> 
    </select> 

예 : 우리가 두 번째 메뉴에서 "interestingValue2"를 선택하면 우리는

<select name="menufoo" id="menufoo" class="menufooClass"> 
     <option value="interestingValue" disabled="disabled">bar foo</option> 
     <option value="foo1" disabled="disabled">foo abc1</option> 
     <option value="bar1" disabled="disabled">foo abc1</option> 
    </select> 

    <select name="menufoo2" id="menufoo2" class="menufooClass2"> 
     <option value="interestingValue2">bar foo2</option> 
     <option value="foo2">foo abc2</option> 
     <option value="bar2">foo abc2</option> 
    </select> 

를 얻을 : 우리가 첫 번째 메뉴에서 "interestingValue"를 선택하면 우리는

<select name="menufoo" id="menufoo" class="menufooClass"> 
     <option value="interestingValue">bar foo</option> 
     <option value="foo1">foo abc1</option> 
     <option value="bar1">foo abc1</option> 
    </select> 

    <select name="menufoo2" id="menufoo2" class="menufooClass2"> 
     <option value="interestingValue2" disabled="disabled">bar foo2</option> 
     <option value="foo2" disabled="disabled">foo abc2</option> 
     <option value="bar2" disabled="disabled">foo abc2</option> 
    </select> 

예를 얻을 수 617,451,515,

덕분에

Answer 1

당신이 시도 할 수 있습니다 : 여기

$('select').change(function(){ 
    if (this.selectedIndex == 0) { 
    $(this).siblings('select').find('option').prop('disabled', true) 
    } 
}) 

DEMO

Answer 2

:) 나는 그것을 얻을 모르겠지만, 이런 식으로 뭔가 :

$('[id^=menufoo]').on('change', function() { 
    if (this.value.indexOf('interestingValue') != -1) { 
     $('[id^=menufoo]').not(this).find('option').prop('disabled', true); 
    }else{ 
     $('[id^=menufoo]').find('option').prop('disabled', false); 
    } 
});​ 

FIDDLE

Answer 3

당신은에 선택 항목 둘 모두 onchange를 이벤트를 연결하고 있는지 확인할 수 있습니다 새 선택 값은 첫 번째 메뉴의 경우 interestingValue와 같고 두 번째 메뉴의 interestingValue2와 같습니다. .prop()를 사용하여이를 비활성화 할 수 있습니다.

당신은 같은 것을 할 수 있습니다 : 당신의 선택 태그 형제 자매 인 경우

$("#menufoo").bind("change", function(event){ 

    $("#menufoo2").find("option").prop("disabled", ($(this).val() == "interestingValue")); 

}); 

$("#menufoo2").bind("change", function(event){ 
    $("#menufoo").find("option").prop("disabled", ($(this).val() == "interestingValue2")); 
}); 

Answer 4

당신이

<script src="jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#menufoo").change(function(){ 
    if($("#menufoo option:selected").val()=="interestingValue") 
     $('.menufooClass2 option').attr('disabled','disabled'); 
    }); 
    $("#menufoo2").change(function(){ 
    if($("#menufoo2 option:selected").val()=="interestingValue2") 
     $('.menufooClass option').attr('disabled','disabled'); 
    }); 


}); 
</script> 


    <select name="menufoo" id="menufoo" class="menufooClass"> 
     <option value="interestingValue">bar foo</option> 
     <option value="foo1">foo abc1</option> 
     <option value="bar1">foo abc1</option> 
    </select> 

     <select name="menufoo2" id="menufoo2" class="menufooClass2"> 
     <option value="interestingValue2">bar foo2</option> 
     <option value="foo2">foo abc2</option> 
     <option value="bar2">foo abc2</option> 
    </select>