Question

我正在尝试根据菜单选择获取文本框或其他下拉菜单。我已经能够通过javascript函数执行此操作。现在我从这个网站得到了一些帮助：

how can select from drop down menu and call javascript function

但这只是我走向目标的一部分。例如，试图根据选择＆＃34;每日＆＃34;来显示一些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>

Answer 1

如果我理解你的问题，你会问＆＃34;如何在选择某个值时插入我的HTML代码＆＃34;。我用三行调整你的代码，它似乎正在工作。这是你期待的吗？

<!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>

Answer 2

您需要定义注入标记的位置。请参阅我的工作示例，了解如何执行此操作。

＆＃13;

var reportWrapper = document.getElementById('reportWrapper');
  
function report(v) {
  switch (v) {
    case "daily":
			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 = '';
}

＆＃13;

<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>

＆＃13;

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

2 个答案: