jQuery를 통해 선택 태그 옵션을 비활성화하는 방법은 무엇입니까? 도움이 필요합니다

Question

태그 선택 옵션과 관련된 질문이 있습니다. plz 중 하나가 jQuery를 통해 해결합니다. 두 개의 선택 태그가 있다고 가정합니다. 첫 번째 선택 태그에는 언어 및 스크립트의 옵션이 있고 두 번째 태그에는 선택의 언어가 있습니다. & 스크립트 관련 옵션이 있습니다. 문제는 두 번째 태그에 언어 옵션 만 표시하는 것보다 첫 번째 선택 태그에서 언어를 선택하는 경우입니다. 마찬가지로 내가 유일의 C#을 언어 옵션을 선택하면

<select id="Languages"> 
    <option value="0">--Select--</option> 
    <option value="1">Languages</option> 
    <option value="2">Scripting</option> 
</select> 
<select id="Scripting"> 
    <option value="0">--Select--</option> 
    <option value="1">C#</option> 
    <option value="2">VB</option> 
    <option value="3">PHP</option> 
    <option value="4">jQuery</option> 
    <option value="5">javascript</option> 
</select> 

지금, VB & PHP는 볼 수 있어야하고 다른 모든 옵션이 비활성화됩니다.

Answer 1

당신은 이것을 2 번 할 수 있습니다.

1. 가 옵션 요소의 ID의의 시작에 문자열, 즉 유무 : = "first_select"

< 선택 ID> < 옵션 ID = "LANG"> 랭을 < 옵션 ID = "스크립트> 스크립트 < />

< 선택 식 선택"second_select "> < 옵션 ID ="lang_1 "> 랭 1을 0 < option id = "script_1> Script 1 </select>

첫 번째 select on은 변경 이벤트를 바인딩합니다.

$('#first_select').change(function() { 
    var type = $(this).attr('id'); 
    $('#second_select option').hide() // Hide all to just show the ones matching type 
    $('#second_select option[id^=' + type + ']').show() 
}); 

2 개 : 거의 같지만 대신 첫 번째 선택 요소에서 각 유형에 대해 1 개의 선택을 사용하십시오. 그리고 변화에 따라 적절한 것을 보여줍니다.

..fredrik

Answer 2

여기에 비교적 쉽게 구성 할 수 있도록하는 기본 템플릿입니다 :

Selected from jquery에 문서를 체크 아웃

var languagePairings = { 
    language1: ['languageA', 'languageB'], 
    language2: ['languageC', 'languageD'] 
}; 

$(function() { 
    $('#select1').change(function() { 
     var $select2 = $('#select2'), 
      val = $(this).val(), 
      availableLanguages = languagePairings[val]; 
     if (availableLanguages && availableLanguages.length) { 
      for (var i = 0; i < availableLanguages.length; i++) { 
       var lang = availableLanguages[i]; 
       $select2.append($('<option />').attr('value', lang).text(lang)); 
      } 
     } else { 
      $select2.empty(); 
     } 
    }); 
}); 

Answer 3

첫째. 난 당신의 코드는 다음과 같이 보일 것 상상 : 사이비 오프 - 더 - 최고의 - 내 머리 코드의

<select name="select1" id="select1"> 
    <option class="script">Scripting</option> 
    <option class="language">Languages</option> 
</select> 

<select name="select2" id="select2"> 
    <option class="script">javascript</option> 
    <option class="language">C#</option> 
    <option class="script language">jQuery</option> 
</select> 

<script type="text/javascript"> 
    $("#select1").change(function() { 
    $("#select2 option").disabled = true; 
    $("#select1 option:selected").each(function() { 
     var classname = $("#select1").attr("class"); 
     $("#select2 ."+classname).disabled = false; 
    }); 
    }) 
    .trigger('change'); 
</script> 

, 당신은 그것을 조금 수정해야 할 수도 있습니다,하지만 일반적인 생각은 당신이 것입니다 클래스를 옵션에 할당하고 해당 클래스 값을 사용하여 두 번째 테이블에서 사용할 수있는 옵션을 제어하십시오.

편집 : hide가 옵션에서 작동하는 것처럼 보이므로 위의 "disabled = [boolean]"호출을 .show() 또는 .hide()로 바꿀 수 있습니다.

Hide options in a select list using jQuery

Answer 4

뮤텍스 선택 :

<select name="st[]" prev_value=""> 
    <option value=""></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 
<select name="st[]" prev_value=""> 
    <option value=""></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 
<script> 
$("select[name='st[]']").live('change', function() 
             {if (this.value) 
              {$("select[name='st[]'] option[value='"+this.value+"']:not(:selected)").remove(); 
              } 
             if ($(this).attr('prev_value')) 
              {var prev_option=$(this).find("option[value='"+$(this).attr('prev_value')+"']"); 
              $("select[name='st[]']").not(this).append(prev_option.clone()); 
              } 
             $(this).attr('prev_value', this.value); 
             } 
          ); 
</script>