2013-04-23 5 views
0

Вот моя проблема: я использую JQuery mobile для стилизации некоторых элементов формы. Одним из элементов формы является меню с несколькими выборами. Я хочу, чтобы это меню выбора имело такое поведение http://jsfiddle.net/LynCV/ (этот пример jsfiddle не мой, я нашел его в Интернете). Я могу добиться такого поведения в стиле нативного стильного меню, но он не работает с пользовательским стилем меню.jquery mobile - выберите, отмените выбор всех пунктов меню, щелкнув опцию «ВСЕ»

вот код, который не делает то, что я хочу:

<!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». Если отменить выбор «ВСЕ», выберите один или несколько параметров.

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"); 
     }); 
    });