selectbox의 동적 addClass()

Question

잘하면이 질문은 반복되지 않지만, 그렇다면 링크를 귀하의 응답으로 게시하십시오.

몇 가지 옵션이있는 선택 드롭 다운과 몇 개의 링크가있는 여러 div가있는 웹 사이트를 만들어야합니다.

선택 상자에서 어떤 옵션을 선택 하느냐에 따라 적절하게 레이블이 지정된 링크가 강조 표시됩니다.

여기 기본 구조입니다 :이 프로세스가 .addClass() .removeClass()와 .change()를 포함 알고

<select> 
    <option value="o1">Option 1</option> 
    <option value="o2">Option 2</option> 
    <option value="o3">Option 3</option> 
    <option value="o4">Option 4</option> 
</select> 

<div> 
    <a href="#" class="o1">Link A</a> 
    <a href="#" class="o2">Link B</a> 
    <a href="#" class="o3">Link C</a> 
    <a href="#" class="o4">Link D</a> 
</div> 

<div> 
    <a href="#" class="o1">Link A</a> 
    <a href="#" class="o2">Link B</a> 
    <a href="#" class="o3">Link C</a> 
    <a href="#" class="o4">Link D</a> 
</div> 

, 난 그냥 그렇게 모두 함께 넣어하는 방법을 잘 모르겠어요 그것은 모든 div에서 동적으로 작동합니다.

미리 감사드립니다. 당신이 이미 질문에 대답처럼

$('select').on('change', function(){ 
    var klass = this.value; 
    $('.highlight').removeClass('highlight'); 
    $('a.'+klass).addClass('highlight'); 
}); 

Answer 1

링크

$('select').on('change', function() { 
    var mycls = this.value; 
    $('a:not(".'+ mycls +'")').removeClass('some_class'); 
    $('a.' + mycls).addClass('some_class'); 
}).change(); // here the initial change event triggered 

를 트리거 처음에 만들려면 마지막 문장이지만 그녀 그 다음 단계입니다.

선택 상자에 .change() 이벤트 처리기를 추가해야합니다.

$("select").change(function() { 

}); 

그런 다음 선택한 값을 읽었을 때와 같은 이름을 지정한 경우 해당 클래스에 스타일이 적용됩니다.

$("select").change(function() { 
    $("." + $(this).attr("value")).css("background", "#ccc"); 
} 

Answer 2

$('select').on('change', function() {  // binding change event for select 
              // fires when select box change 

    var mycls = this.value;     // getting the value of select 
              // box after change 



    $('a:not(".'+ mycls +'")')    // select <a> tag that has no 
              // class same as select box value 
       .removeClass('some_class'); // and remove highlight 
              // class form that <a> 

    $('a.' + mycls)       // select the <a> with class 
              // same as select box value 
      .addClass('some_class');  // and adding highlight class 
}); 

는 링크의 하이라이트는 바로 초기 변화 때문에 DEMO

Answer 3

같다 :

Answer 4

선택 목록에 ID를 부여했다고 가정합니다.

$('#selectid').change(function(){ 

    $('*').removeClass('highlight'); 

    $('.'+$(this).val()).addClass('highlight'); 

}); 

나는 위의 테스트하지했지만 그것은 바른 길에 당신을 넣어해야합니다 selectid 당신은 당신이 뭔가를 할 수있는, 클래스가 .highlight라고했다.