Verwenden Sie das Meta-Feld, um eine dynamische Dropdown-Liste zu erstellen

Ich möchte eine bedingte Dropdown-Liste in WordPress erstellen. Die Liste enthält drei Auswahloptionen

1.) Wenn der Benutzer eine Option aus der ersten Liste auswählt, füllt er die andere Liste dynamisch auf.

2.) und wenn der Benutzer eine Option aus der zweiten Liste auswählt, füllt er die dritte Liste auf.

3.) Nun wählt der Benutzer eine Option aus der dritten Liste aus. Er enthält einen Link zu dieser Seite.

Ich habe diese Logik auch in JavaScript geschrieben, aber es funktioniert nicht und ich möchte einen einfachen Weg, dies zu implementieren. Hier ist der Code

 

function MyApple (Telefon, 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); } 

}

function MyAppleSkinCase (Telefon, 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); } } 

}}

Wählen Sie bitte Ihr Telefon

iPhone 6 / 6s iPhone 6 / 6s Plus Iphone 7 iPhone 7 Plus Iphone 5 / 5s Iphone 5c Iphone 4 / 4s

Wählen Sie ein Skin oder Case Wählen Sie PreDesigned oder Customized

Bitte helfen Sie diesbezüglich. Ich möchte dazu eine einfache Logik verwenden. Jede Plugin-Empfehlung oder Code.

Solutions Collecting From Web of "Verwenden Sie das Meta-Feld, um eine dynamische Dropdown-Liste zu erstellen"