Question

我有一个表格，我有一个下拉菜单来选择一个城市。我想在此表单中添加一个下拉列表，以选择所选城市中的位置。我的表单代码如下所示

<s:form  role="form" name = "signUpForm" onsubmit="return validateSignupForm()" action = "signUp" method="post" namespace="/" theme="simple">
    <div class ="form-group">
        <label for= "city">City</label>
            <select list="cityList" onchange="getLoad()" class="form-control selectpicker"  name="city" id="city"   data-live-search="true" data-size="5">
             <option value="NA">--select a city--</option>  
             <option value="A"> A</option>
             <option value ="B">B</option>
             <option value ="C">C</option>
             <option value ="D">D</option>
          </select> 
    </div>
    <div id="parentLocationDiv"></div>
 </s:form>

除此之外，我还创建了四个单独的div，其中包含城市中位置的选择选项。

<div class="form-group" id="ALocation">
  <select id="alocation" name="alocation">
     <option value="1">1</option>
     <option value="2">2</option>
  </select>
</div>
<div class="form-group" id="BLocation">
  <select id="blocation" name="blocation">
     <option value="1">1</option>
     <option value="2">2</option>
  </select>
</div>

现在将这些div添加到我使用以下javascript的表单中：

  function getLoad(){

     var ParentDiv  =   document.getElementById("parentLocationDiv"); 

     while(ParentDiv.hasChildNodes())
     {
         ParentDiv.removeChild(ParentDiv.childNodes[0]);
     }
            var cityName = document.getElementById("city").value;

                if(ParentDiv.hasChildNodes())
                {   while(ParentDiv.hasChildNodes())
                    {   
                        ParentDiv.removeChild(Parentdiv.childNodes[0]);

                    }
                }
                debugger;
                var clone = document.getElementById(cityName.concat("Location")).cloneNode(true);
                ParentDiv.appendChild(clone);
                ParentDiv.childNodes[0].style.display="block";
                var newdiv = ParentDiv.childNodes[0];
                newdiv.getElementsByTagName("select").name="location";
                newdiv.getElementsByTagName("select").id="location";

      }

现在，当我选择一个城市对应的位置时，下拉菜单在表单中可见，但是当我选择任何选项时，它不会被选中。谁能帮我这个？

Answer 1

您的代码似乎有效，除了在没有匹配位置的情况下抛出错误。您可以按如下方式修复它：

function getLoad() {

  var parentDiv = document.getElementById("parentLocationDiv");

  while (parentDiv.hasChildNodes()) {
    parentDiv.removeChild(parentDiv.childNodes[0]);
  }
  var cityName = document.getElementById("city").value || "";
  var target = document.getElementById(cityName.concat("Location"));
  if (!target)
    return;
  var clone = target.cloneNode(true);
  clone.getElementsByTagName("select").name = "location";
  clone.getElementsByTagName("select").id = "location";
  parentDiv.appendChild(clone);
  parentDiv.childNodes[0].style.display = "block";

}

.holder {
  display: none;
}

<form role="form" name="signUpForm" onsubmit="return validateSignupForm()" action="signUp" method="post" namespace="/" theme="simple">
  <div class="form-group">
    <label for="city">City</label>
    <select list="cityList" onchange="getLoad()" class="form-control selectpicker" name="city" id="city" data-live-search="true" data-size="5">
      <option value="NA">--select a city--</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
    </select>
  </div>
  <div id="parentLocationDiv"></div>
</form>

<div class="form-group holder" id="ALocation">
  <select id="alocation" name="alocation">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</div>
<div class="form-group holder" id="BLocation">
  <select id="blocation" name="blocation">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</div>

包含select的div在附加到表单后不起作用

1 个答案: