可以在联系表单7中为多个下拉列表分配单个名称

Question

我有一个包含多个下拉列表的联系表单。代码如下

 [select* Country id:CountryDropDown first_as_label "Select Your Country*" "Algeria" "Argentina" "Australia" "Austria" "Belgium" "Brazil" "Canada" "China" "France" "Germany" "India" "Italy" "New Zealand" "Poland" "South Africa" "South Korea" "Thailand" "United Arab Emirates" "United Kingdom" "USA" "Zimbabwe"] 

<label id="AlgeriaStates">[select State "Adrar" "Ain Defla" "Ain Temouchent" "Alger" "Annaba" "Batna" "Bechar" "Bejaia" "Biskra" "Blida" "Bordj Bou Arreridj" "Bouira" "Boumerdes" "Chlef" "Constantine" "Djelfa" "El Bayadh" "El Oued" "El Tarf" "Ghardaia" "Guelma" "Illizi" "Jijel" "Khenchela" "Laghouat" "Mascara" "Medea" "Mila" "Mostaganem" "Oran" "Ouargla" "Oum el Bouaghi" "Relizane" "Saida" "Setif" "Sidi Bel Abbes" "Skikda" "Souk Ahras" "Tamanghasset" "Tebessa" "Tiaret" "Tindouf" "Tipaza" "Tissemsilt" "Tizi Ouzou" "Tlemcen" "Wilaya de M'Sila" "Wilaya de Naama"]</label>

<label id="ArgentinaStates">[select State "Buenos Aires" "Catamarca" "Chaco" "Chubut" "Cordoba" "Corrientes" "Entre Rios" "Formosa" "Jujuy" "La Pampa" "La Rioja" "Mendoza" "Misiones" "Neuquen" "Rio Negro" "Salta" "San Juan" "San Luis" "Santa Cruz"]</label>
<label id="AustraliaStates"> [select State "Australian Capital Territory" "New South Wales" "Northern Territory" "Queensland" "South Australia" "Tasmania" "Victoria" "Western Australia"]</label>
[submit "SUBMIT"]

我使用 JavaScript 根据国家/地区字段显示/隐藏。

<script type="text/javascript">
  document.getElementById("AlgeriaStates").style.display = 'none';
document.getElementById("CountryDropDown").addEventListener("change", displayTextField);
  function displayTextField() {
    var dropDownText =  document.getElementById("CountryDropDown").value;
    if (dropDownText == "Algeria") {
      document.getElementById("AlgeriaStates").style.display = 'block';
    } else {
      document.getElementById("AlgeriaStates").style.display = 'none';
    }
  }
</script>
<script type="text/javascript">
  document.getElementById("ArgentinaStates").style.display = 'none';
document.getElementById("CountryDropDown").addEventListener("change", displayTextField);
  function displayTextField() {
    var dropDownText =  document.getElementById("CountryDropDown").value;
    if (dropDownText == "Argentina") {
      document.getElementById("ArgentinaStates").style.display = 'block';
    } else {
      document.getElementById("ArgentinaStates").style.display = 'none';
    }
  }
</script>
<script type="text/javascript">
  document.getElementById("AustraliaStates").style.display = 'none';
document.getElementById("CountryDropDown").addEventListener("change", displayTextField);
  function displayTextField() {
    var dropDownText =  document.getElementById("CountryDropDown").value;
    if (dropDownText == "Australia") {
      document.getElementById("AustraliaStates").style.display = 'block';
    } else {
      document.getElementById("AustraliaStates").style.display = 'none';
    }
  }
</script>

---

我为所有三个状态字段使用一个名称字段作为"状态"，以避免数据库中显示空字段。 但它只取最后一个字段值。 问题可能是因为名称字段重复。 如果是，请提供解决该问题的解决方案。

工作很好。 但是在将数据保存到数据库中时，仅取最后一个字段值。也就是说，如果选择国家为阿尔及利亚或阿根廷，数据库将自动采用最后一个字段的第一个值(即"澳大利亚首都直辖区"(。如何解决问题？请让我提供解决方案。谢谢

Answer 1

试试这个，

<script type="text/javascript">
   function disableStateFields(){
    document.getElementById("AlgeriaStates").style.display = 'none';
    document.getElementById("AlgeriaStates").disabled = true;
    document.getElementById("ArgentinaStates").style.display = 'none';
    document.getElementById("ArgentinaStates").disabled = true;
    document.getElementById("AustraliaStates").style.display = 'none';
    document.getElementById("AustraliaStates").disabled = true;
  }
  function displayTextField() {
    var dropDownText =  document.getElementById("CountryDropDown").value;
    disableStateFields()
    var id='';
    switch (dropDownText) {
      case "Algeria":
        id = "AlgeriaStates";
        break;
      case "Argentina":
        id= "ArgentinaStates";
        break;
      case "Australia":
        id= "AustraliaStates";
        break;
    }
    document.getElementById(id).style.display = 'block';
    document.getElementById(id).disabled = false;
  }
  disableStateFields();
  document.getElementById( "CountryDropDown" ).addEventListener( "change", displayTextField);
</script>