根据菜单选项获取不同类型的html输出

问题描述：

我想基于菜单选择获取文本框或另一个下拉菜单。我已经能够通过JavaScript函数做到这一点。现在，我得到从本网站一些帮助：根据菜单选项获取不同类型的html输出

how can select from drop down menu and call javascript function

但只花了我朝着我的目标方式的一部分。例如试图显示一些基于在菜单选项中选择“每日”的html功能，但是这不起作用。下面是我的代码，你能帮我调整这段代码，这样我就可以在下拉菜单中选择每日选择的JavaScript代码中嵌入的html代码。

<!DOCTYPE html> 
<html> 
<body> 

<select name="aa" onchange="report(this.value)"> 
<option value="">Please select</option> 
    <option value="daily">daily</option> 
    <option value="monthly">monthly</option> 
    </select> 
<script> 
function report(v) { 
//To Do 
    switch(v) { 
     case "daily": 
      notification_var = "<hr>"; 
      notification_var += "<table width=100% border=0>"; 
      notification_var += "<tr>"; 
      notification_var += "<td align=left width=30% style='align:left;padding-left:0px;height:30px;'><span id='toplink_daily_remarks'></span></td>"; 
      notification_var += "<td align=center><label style='font-family:arial;font-weight:bold;font-size:1.2em;color:#000080;'>Daily Info and Remarks</label></td>"; 
      notification_var += "<td width=30%>&nbsp;</td>"; 
      notification_var += "</tr>"; 
      notification_var += "</table>"; 
      return notification_var; 
     break; 
    case "monthly": 
     //Do somthing 
     break; 
    } 
} 
</script> 

</body> 
</html>

答

您需要定义要在哪里注入标记。看到我的工作示例如何做到这一点。

var reportWrapper = document.getElementById('reportWrapper'); 
 
    
 
function report(v) { 
 
    switch (v) { 
 
    case "daily": 
 
\t \t \t daily(); 
 
     break; 
 
    case "monthly": 
 
     monthly(); 
 
     break; 
 
    } 
 
} 
 

 
function daily() { 
 
    var notification_var = "<hr>"; 
 
    notification_var += "<table width=100% border=0>"; 
 
    notification_var += "<tr>"; 
 
    notification_var += "<td align=left width=30% style='align:left;padding-left:0px;height:30px;'><span id='toplink_daily_remarks'></span></td>"; 
 
    notification_var += "<td align=center><label style='font-family:arial;font-weight:bold;font-size:1.2em;color:#000080;'>Daily Info and Remarks</label></td>"; 
 
    notification_var += "<td width=30%>&nbsp;</td>"; 
 
    notification_var += "</tr>"; 
 
    notification_var += "</table>"; 
 
    
 
    reportWrapper.innerHTML = notification_var; 
 
} 
 

 
function monthly() { 
 
    reportWrapper.innerHTML = ''; 
 
}

<select name="aa" onchange="report(this.value)"> 
 
    <option value="">Please select</option> 
 
    <option value="daily">daily</option> 
 
    <option value="monthly">monthly</option> 
 
</select> 
 

 
<div id="reportWrapper"></div>

我试图运行上面的代码，并会收到以下错误：未捕获的类型错误：不能设置为空的特性“的innerHTML”。如何解决这个问题？“ – jms1980

@ jms1980你是否已经更新了html以包含'

'？你在js'var的顶部有这条线吗？ – itodd

答

如果我正确理解你的问题，你问“如何在选择特定值时在页面上插入我的HTML代码”。我调整了三行代码，它似乎工作。这是你期望的吗？

<!DOCTYPE html> 
<html> 
<body> 

<select name="aa" onchange="report(this.value)"> 
<option value="">Please select</option> 
    <option value="daily">daily</option> 
    <option value="monthly">monthly</option> 
    </select> 
<script> 
function report(v) { 
//To Do 
    switch(v) { 
     case "daily": 
      var notification_var = "<hr>"; 
      notification_var += "<table width=100% border=0>"; 
      notification_var += "<tr>"; 
      notification_var += "<td align=left width=30% style='align:left;padding-left:0px;height:30px;'><span id='toplink_daily_remarks'></span></td>"; 
      notification_var += "<td align=center><label style='font-family:arial;font-weight:bold;font-size:1.2em;color:#000080;'>Daily Info and Remarks</label></td>"; 
      notification_var += "<td width=30%>&nbsp;</td>"; 
      notification_var += "</tr>"; 
      notification_var += "</table>"; 
      document.open(); 
      document.write(notification_var); 
      document.close(); 
      return notification_var; 
     break; 
    case "monthly": 
     //Do somthing 
     break; 
    } 
} 
</script> 

</body> 
</html>

根据菜单选项获取不同类型的html输出

相关推荐