Параметры связанных метабоксов

Question

Параметры связанных метабоксов

Можно ли построить метабокс, который имеет несколько опций, которые связаны между собой?

Скажем, у меня есть 3 варианта на выбор, с несколькими вариантами:

Выбор 1: А1, А2, А3, А4

Выбор 2: B1, B2, B3, B4, B5

Выбор 3: С1, С2, С3

Теперь, когда я выбираю опцию A1, единственными доступными опциями из двух других вариантов являются, например, B2, B4, B5 и C1. И так далее, для разных вариантов.

Дело в том, что я могу легко создать эти параметры, а затем просто добавить описание, в котором говорится, какой параметр может идти с какими другими параметрами. Допустим, вы выбрали A1 и B1, но B1 не будет работать, поэтому вам не следует выбирать это, я могу просто записать это, но я думаю, что это не так удобно для пользователя, и людям иногда лень читать, так что это проще ограничить эти варианты.

Это можно сделать? И как? HTML манипулирование или внутри PHP с switch или же if-else-if заявления?

1

meta-boxes php wordpress

Решение

По вопросам рекламы [email protected]

Accepted Answer

Вам нужны цепочечные выборы, вот простой пример

$("#main").change(function(){
$('.chain').fadeOut('slow');
switch( $(this).val() ){
case 'tutorials':
$('#tutorials').fadeIn('fast');
break;
case 'articles':
$('#articles').fadeIn('fast');
break;
}
});

body {
padding:30px;
background-color: #D4DE8C;
}
select {
float:left;
clear:both;
margin: 5px;
}
.chain {
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="main">
<option value="blog">Blog</option>
<option value="tutorials">Tutorials</option>
<option value="articles">Articles</option>
</select>
<select id="tutorials" class="chain">
<option value="jquery">JavaScript » jQuery</option>
<option value="codeigniter">PHP » CodeIgniter</option>
<option value="wordpress">PHP » WordPress</option>
<option value="xhtml-css">XHTML/CSS</option>
</select>
<select id="articles" class="chain">
<option value="security">Articles » Security</option>
<option value="design">Articles » Design</option>
</select>

1

Другие решения

Других решений пока нет …

Источник