jQuery 선택 상자 상호 작용

선택 드롭 다운 상자의 jsFiddle을 가지고 있는데 필요한 결과가 아닙니다. 이 예에서는 '오클랜드 항'을 사용했습니다. 'Port of Auckland'를 클릭하면 내용이 표시되지만 드롭 박스 값을 변경하여보고있는 포트와 일치하게하고 싶습니다.jQuery 선택 상자 상호 작용

업데이트 솔루션은 prop 기능을 사용했습니다. 또한, 모든 포트를 복제하는 대신 ... jQuery를 모두 축소 할 수있는 쉬운 방법이 있습니까? 그러면 요소의 힙을 표시하거나 숨길 필요가 없습니다.

http://jsfiddle.net/an173g55/1/

$(document).ready(function(){ 
    $("select").change(function(){ 
     $("select option:selected").each(function(){ 
      if($(this).attr("value")=="all"){ 
       $(".auckland").hide(); 
       $(".all").show(); 
      } 
      if($(this).attr("value")=="auckland"){ 
       $(".all").hide(); 
       $(".auckland").show(); 

      } 
     }); 
    }).change(); 

    $('.auckland-link').click(function() { 
    $('.auckland').show(); 
    $(".all").hide(); 
}); 


});

은 어떤 도움이 많이 이해할 수있을 것이다. 건배.

출처

2014-10-14 tebrown

jQuery .prop() 메소드를 사용하여 변경할 수 있습니다. 회신 http://jsfiddle.net/Lny58ve3/2/

출처

2014-10-14 01:25:47

감사 : 여기

$(document).ready(function(){ $("select").change(function(){ $("select option:selected").each(function(){ if($(this).attr("value")=="all"){ $(".auckland").hide(); $(".all").show(); } if($(this).attr("value")=="auckland"){ $(".all").hide(); $(".auckland").show(); } }); }).change(); $('.auckland-link').click(function() { $('select option:contains("Auckland")').prop('selected', true); $('.auckland').show(); $(".all").hide(); }); });

은 바이올린에서 포크 그것의 작업 샘플입니다. 그건 잘 작동합니다. 모든 포트를 복제하지 않고이 jQuery를 작동시키는 더 쉬운 방법이 있습니까? 현재이 포트는 1 포트이지만 나머지는 반드시해야합니다. – tebrown

@ user1628845 select의 옵션 이름이 제목과 같은 경우 다음을 사용할 수 있습니다. $ ('select 옵션 : contains ""+ $ (this) .html() +' ") 'selected', true); –

jQuery 선택 상자 상호 작용

답변

관련 문제