根据菜单选择显示/隐藏表单输入字段

时间:2015-07-10 22:19:24

标签: javascript html forms

我试图根据菜单选择加载某些输入隐藏的字段数据。但我无法使用下面的代码。你能帮我找出我出错的地方吗?我想尝试让这段代码正常工作。

我目前在标题中有这个javascript。

checker

这里是字段表格菜单html:

<script type="text/javascript">
    function toggle() {
        //alert(thing.options[thing.selectedIndex].innerHTML);
        var w = document.getElementById("pt").selectedIndex;
        var selected_text = document.getElementById("pt").options[w].text;
        if (selected_text == "Home") {
            //alert(selected_text)
            document.getElementById("hiddenbox").innerHTML = '<input type="hidden" name="sfrType[]" value="RES-Single Family"><input type="hidden" name="sfrType[]" value="RES-Farm-Ranch">'
        } else if (selected_text == "Lot") {
            // alert(selected_text)
            document.getElementById("hiddenbox").innerHTML = '<input type="hidden" id="amin_acres" name="amin_acres" value="0.001">'
        } else if (selected_text == "Acreage") {
            //alert(selected_text)
            document.getElementById("hiddenbox").innerHTML = '<input type="hidden" name="amin_acres" value="2">'
        } else {
            document.getElementById("hiddenbox").innerHTML = '';
        }
    }
</script>

因此,如果选择<select name="pt" id="pt" onChange="toggle()" size="5" multiple="multiple"> <option value="sfr" selected="selected">Home</option> <option value="ld">Lot</option> <option value="ld">Acreage</option> <option value="com">Commercial</option> </select> ,则会加载输入隐藏字段Acreage。它曾经工作,然后它停止工作。

3 个答案:

答案 0 :(得分:1)

似乎你丢失了#hiddenbox元素。

<div id="hiddenbox"></div>
<select name="pt" id="pt" onChange="toggle()" size="5" multiple="multiple"> 
  <option value="sfr" selected="selected">Home</option> 
  <option value="ld">Lot</option> 
  <option value="ld">Acreage</option> 
  <option value="com">Commercial</option>
</select>

否则代码工作正常。

答案 1 :(得分:1)

您将输入标记的类型设置为隐藏。因此,输入类型不会显示。此外,最好使用如here所示的表单标记包装输入标记。我希望这有帮助!

答案 2 :(得分:1)

请务必添加div

<div id="hiddenbox"></div>

<script type="text/javascript">
function toggle() {
//alert(thing.options[thing.selectedIndex].innerHTML);
var w = document.getElementById("pt").selectedIndex;
var selected_text = document.getElementById("pt").options[w].text;
 if (selected_text == "Home") {
    //alert(selected_text)
  document.getElementById("hiddenbox").innerHTML = '<input  name="sfrType[]" value="RES-Single Family"><input type="hidden" name="sfrType[]" value="RES-Farm-Ranch">'
  }   
 else if  (selected_text == "Lot") {
   // alert(selected_text)
  document.getElementById("hiddenbox").innerHTML = '<input  id="amin_acres" name="amin_acres" value="0.001">'
  }   
 else if (selected_text == "Acreage") {
    //alert(selected_text)
  document.getElementById("hiddenbox").innerHTML = '<input  name="amin_acres" value="2">'
 } else {
  document.getElementById("hiddenbox").innerHTML ='';
 }
}

 </script>