Я хочу создать условный выпадающий список в wordpress. Список будет иметь три варианта выбора
1.) Когда пользователь выбирает параметр из первого списка, он динамически заполняет другой список.
2.), и когда пользователь выбирает вариант из второго списка, он заполняет третий список.
3.) Теперь пользователь выбирает параметр из третьего списка. Он содержит ссылку на эту страницу.
Я написал эту логику и в JavaScript, но она не работает, и мне нужен простой способ ее реализации. Вот код
<script type="text/javascript"> функция MyApple (телефон, caseSkin) {
var newOption = document.createElement("option"); newOption.value = "pair[0]"; newOption.innerHTML = "pair[1]"; caseSkin.options.add(newOption); var phone = document.getElementById(phone); var caseSkin = document.getElementById(caseSkin); if(phone.value == "select") return; caseSkin.innerHTML = ""; var optionArray = ["select|select Skin or Case" , "skin|Skin" , "case|Case"]; for(var option in optionArray){ var pair = optionArray[option].split("|"); var newOption = document.createElement("option"); newOption.value = pair[0]; newOption.innerHTML = pair[1]; caseSkin.options.add(newOption); }
}
функция MyAppleSkinCase (телефон, caseSkin, preCus) {
var phone = document.getElementById(phone); var caseSkin = document.getElementById(caseSkin); var preCus = document.getElementById(preCus); if(caseSkin.value == "select") return; preCus.innerHTML = ""; if(phone.value == "iphone6") { if(caseSkin.value == "case") { var newOption = document.createElement("option"); newOption.value = ""; newOption.innerHTML = "PreDesigned"; preCus.option.add(newOption); newOption.value = ""; newOption.innerHTML = "Customized"; preCus.option.add(newOption); } } else if(phone.value == "iphone6plus") { if(caseSkin.value == "case") { var newOption = document.createElement("option"); newOption.value = ""; newOption.innerHTML = "PreDesigned"; preCus.option.add(newOption); newOption.value = ""; newOption.innerHTML = "Customized"; preCus.option.add(newOption); } } else if(phone.value == "iphone7") { if(caseSkin.value == "case") { var newOption = document.createElement("option"); newOption.value = ""; newOption.innerHTML = "PreDesigned"; preCus.option.add(newOption); newOption.value = ""; newOption.innerHTML = "Customized"; preCus.option.add(newOption); } } else if(phone.value == "iphone7plus") { if(caseSkin.value == "case") { var newOption = document.createElement("option"); newOption.value = ""; newOption.innerHTML = "PreDesigned"; preCus.option.add(newOption); newOption.value = ""; newOption.innerHTML = "Customized"; preCus.option.add(newOption); } } else if(phone.value == "iphone5") { if(caseSkin.value == "case") { var newOption = document.createElement("option"); newOption.value = ""; newOption.innerHTML = "PreDesigned"; preCus.option.add(newOption); newOption.value = ""; newOption.innerHTML = "Customized"; preCus.option.add(newOption); } } else if(phone.value == "iphone5c") { if(caseSkin.value == "case") { var newOption = document.createElement("option"); newOption.value = ""; newOption.innerHTML = "PreDesigned"; preCus.option.add(newOption); newOption.value = ""; newOption.innerHTML = "Customized"; preCus.option.add(newOption); } } else if(phone.value == "iphone4") { if(caseSkin.value == "case") { var newOption = document.createElement("option"); newOption.value = ""; newOption.innerHTML = "PreDesigned"; preCus.option.add(newOption); newOption.value = ""; newOption.innerHTML = "Customized"; preCus.option.add(newOption); } }
}}
<select id = "Apple" name = "Apple" onchange = "MyApple (this.id, 'caseSkin')"> <option value = "select"> Выберите свой телефон </ option>
<option value = "iphone6"> Iphone 6 / 6s </ option> <option value = "iphone6plus"> Iphone 6 / 6s Plus </ option> <option value = "iphone7"> Iphone 7 </ option> <значение опции = «iphone7plus»> Iphone 7 Plus </ option> <значение опции = "iphone5"> Iphone 5 / 5s </ option> <значение опции = "iphone5c"> Iphone 5c </ option> <значение опции = "iphone4"> Iphone 4 / 4s </ option> </ select>
<select id = caseSkin name = "caseSkin" onchange = "MyAppleSkinCase ('Apple', this.id, 'preCus')"> <значение опции = "выберите"> Выберите скин или футляр </ option> </ select> <select id = preCus name = "preCus"> <option value = "select"> Выбрать PreDesigned или Customized </ option> </ select>
Пожалуйста, помогите в этом. Я хочу использовать простую логику для этого. Любая рекомендация или код плагина.