Я пытаюсь показать/скрыть некоторые переключатели в двойном состоянии с помощью 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>
Для обеспечения согласованности, оберните каждый выбор в 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);
chosen
плагин слишком много раз (вызывая .chosen
). Я говорю, чтобы применить это только один раз. Удалите оригинальный .chosen().change
материал и переместите чеки на «Paris» и «London» в новую функцию onChange
.