2013-04-23 7 views
0

여기 내 문제가 있습니다. Jquery mobile을 사용하여 일부 양식 요소의 스타일을 지정합니다. 양식 요소 중 하나는 다중 선택 메뉴입니다. 이 선택 메뉴에이 동작을 사용하려면 http://jsfiddle.net/LynCV/ (이 jsfiddle 예제는 인터넷에있는 것이 아닙니다)입니다. 네이티브 선택 메뉴 스타일링에서이 동작을 얻을 수 있지만 사용자 지정 메뉴 스타일링에서는 작동하지 않습니다.jquery mobile - "ALL"옵션을 선택하여 모든 선택 메뉴 옵션을 선택 취소합니다.

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>select-deselect all</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
    /* this jquery script is from the jsfiddle and it is working on native styling but not on a custom styling.*/ 
    <script> 
     $(document).ready(function(){ 
      $('select').change(function(){ 
       if (this.selectedIndex == 0){ 
        $('option:gt(0)', this).prop('selected',false); 
       }else{ 
        $('option:first', this).prop('selected',false); 
       } 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <label for="selectBox">Choose one or more</label> 
    <select id="selectBox" multiple="multiple" data-native-menu="false">//select element in note a native menu but custom you can see it by data-native-menu="false" 
     <option value="all">all</option> 
     <option value="one">one</option> 
     <option value="tow">tow</option> 
     <option value="three">three</option> 
    </select> 
</body> 
</html> 

다시 내가 원하는 것은 : 선택할 때 "ALL"옵션은 다른 모든 옵션의 선택을 취소하고 하나를 선택할 수 없습니다 여기

내가하고 싶은 일을하지 않는 코드입니다 "ALL"옵션의 선택을 취소하지 않고 다른 옵션을 선택하십시오. "ALL"옵션을 선택 취소하면 하나 이상의 옵션을 선택할 수 있습니다.

edit1 : jquery 모바일 API 읽기. 나는 여기에 뿌리다 http://api.jquerymobile.com/select/#method-refresh 그 내가 원하는 refresh() 메서드를 사용하여 달성하기 위해. 그러나 나는 그것을 사용하는 방법을 이해할 수 없었다.

edit2 : 여기 내 질문이 중복 된 것으로 간주 될 수 있지만 답변을 검색 한 결과 내 문제를 해결하기 위해 찾은 솔루션을 사용하는 방법을 이해할 수 없었습니다. 그래서 나는 내 문제에 대한 구체적인 대답을 요구하고있다.

edit2 : 알다시피 나는이 모든 것에 초보자입니다.

시간과 가능한 답변에 감사드립니다. 가능하다면 몇 가지 코드 예제를 제공하십시오. 고맙습니다! 귀하의 경우에는

답변

1

은 당신이 "선택"속성을 변경 한 후에

$("#selectBox").selectmenu("refresh"); 

를 호출합니다.

$(document).ready(function(){ 
     $('select').change(function(){ 
      if (this.selectedIndex == 0){ 
       $('option:gt(0)', this).prop('selected',false); 
      }else{ 
       $('option:first', this).prop('selected',false); 
      } 
      $("#selectBox").selectmenu("refresh"); 
     }); 
    });