Chosen-JQuery показать / скрыть в двойных условиях

0

Я пытаюсь показать/скрыть некоторые переключатели в двойном состоянии с помощью Chosen. Не уверен, что это можно сделать.

У меня есть этот первый выбор, который заполняет второй выбор. Второй выбор действительно показывает несколько выбранных и скрытых в зависимости от выбора первого выбора.

Цель состоит в том, чтобы показать/скрыть некоторые переключатели в зависимости от выбора. Поэтому, если у вас есть select1 = A и select2 = a 'показать определенный переключатель.

До сих пор я успешно справлялся с одним единственным выбором как условие (JS):

$(".chosen").chosen();
$("#a").chosen().change(function () {
  var value = $(this).val();
  if (value=="Opt1") {
    $("#b").show();

    } else {$("#b").hide();}
    }).trigger('change');

Это функция, которая отображает/скрывает второй выбор.

Поскольку я пробовал много вещей и не добился успеха, я пришел к отчаянному решению, которое забывает о двойном состоянии и запускает переключатели при выборе второго выбора, как это (JS):

$(".chosen").chosen();
$("#c").chosen().change(function () {
  var value = $(this).val();
  if (value=="Opt1") {
    $("#radio").show();

    } else {$("#radio").hide();}
    }).trigger('change');

Однако это разрушает все это, потому что это показывает, что этот "c" выбирается, когда он должен быть скрыт в соответствии с предыдущими функциями. Любая идея о том, как преодолеть это?

ОБНОВИТЬ

Это весь код. Я удалил id, не имея смысла с настоящими именами:

<!doctype html>
<html lang="en">

<head>
 <meta charset="utf-8">
<title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>
 <link rel="stylesheet" href="docsupport/style.css">
 <link rel="stylesheet" href="docsupport/prism.css">
 <link rel="stylesheet" href="chosen.css">
<style type="text/css" media="all">
  /* fix rtl for demo */
  .chosen-rtl .chosen-drop { left: -9000px; }
</style>
</head>

<body>
 <form>

  City  
    <div id="city"> 
    <select data-placeholder="Select city" id="a" class="chosen-select"   style="width:350px;" tabindex="2">  
     <option value="London">London</option>
     <option value="Paris">Paris</option>
     </select>
     </div>
     <br>

  Trial
    <div id="trial1">
    <select data-placeholder="Select court" class="chosen-select" style="width:350px;" tabindex="2">
      <option value="Court of District"> Court of District </option>
      <option value="Magistrates Court"> Magistrates Court </option>
    </select>
    </div>

    <div id="trial2">
    <select data-placeholder="Select court2" class="chosen-select" style="width:350px;" tabindex="2">  
      <option value="Cour de cassation"> Cour de cassation </option>
      <option value="Cour dapell"> Cour dapell </option>
    </select>
    </div>
    <br>

<!--- this is a hidden radio that should show up when city== "Paris" and trial2== "Cour dapell" --->

   <div id=radio1><br>
   <input type="radio" name="radiob" value="Apell Criminal"> Apell Criminal <br>
   <input type="radio" name="radiob" value="Apell Civil" checked> Apell Civil <br> 
   </div>

   <br>
   <input type="button" id="btncalc" value="Go on">
   </form>
   </body>   

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"  type="text/javascript"></script>
   <script src="chosen.jquery.js" type="text/javascript"></script>
   <script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">


   var config = {
     '.chosen-select'           : {},
     '.chosen-select-deselect'  : {allow_single_deselect:true},
     '.chosen-select-no-single' : {disable_search_threshold:10},
     '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
     '.chosen-select-width'     : {width:"95%"}
   }

  for (var selector in config) {
  $(selector).chosen(config[selector]);
   }

      <!--- Hides the third select and radio buttons--->

   $('#trial2').hide();
   $('#radio1').hide();

     <!---  Shows/hides second and third select, depending on first selects choice--->

$(".chosen").chosen();
$("#city").chosen().change(function () {
    var value = $(this).val();
    if (value=="London") {
        $("#trial1").show();
        $("#trial2").hide();
    } else if (value == "Paris") {
        $("#trial1").hide();
        $("#trial2").show();
    } 
}).trigger('change');



        <!--- show/hide the radio button--->    

$('.chosen').chosen().change(onChange);

    var onChange = function () {
    var a = $('#city').find('select').val();
    var b = $('#trial1').find('select').val();
    var c = $('#trial2').find('select').val();
    /* do all conditional checks here on values a, b, and c */
   /* here is an example check on the values of a and b: */
    if (a === 'Paris' && c === ‘Cour dapell) {
    /* show radios */
    $("#radio1").show();
}
}; $('.chosen').chosen().change(onChange);


</script>

</body>
</html>
  • 0
    Предоставление HTML было бы полезно.
  • 0
    Благодарю. JSFiddle: jsfiddle.net/7VFQQ
Показать ещё 2 комментария
Теги:
jquery-chosen

1 ответ

0
Лучший ответ

Для обеспечения согласованности, оберните каждый выбор в div. Мы можем id div 'a', 'b' и 'c', но это действительно уродливо, и я бы предложил подумать над чем-то более описательным. Мы можем сначала написать функцию, которую мы хотим запустить, когда любой из наших вариантов изменил свое значение:

var onChange = function () {
    var a = $('#a').find('select').val();
    var b = $('#b').find('select').val();
    var c = $('#c').find('select').val();
    /* do all conditional checks here on values a, b, and c */
    /* here is an example check on the values of a and b: */
    if (a === 'X' && b === 'ya') {
        /* show radios */
    }
};

Затем мы передадим нашу функцию как обработчик изменений ко всем.chosen selects (мы должны быть уверены, что все выбранные нами, которые мы хотим применить "selected", чтобы иметь класс "selected"):

$('.chosen').chosen().change(onChange);
  • 0
    Так много. Я попытался переместить идентификатор с первого выбора на первый div для согласованности. Это отключает первый выбор, поэтому я дал идентификатор как div, так и select. Тем не менее, я все еще не могу заставить эту функцию работать. Он просто игнорирует двойной выбор и не отображает никаких переключателей. Я модифицировал оригинальный пост, чтобы показать весь код.
  • 0
    Вы применяете chosen плагин слишком много раз (вызывая .chosen ). Я говорю, чтобы применить это только один раз. Удалите оригинальный .chosen().change материал и переместите чеки на «Paris» и «London» в новую функцию onChange .
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню