javascript：从下拉菜单中创建动态复选框答案

【问题标题】：javascript: create dynamic checkbox from dropdown menujavascript：从下拉菜单中创建动态复选框
【发布时间】：2014-09-26 23:34:04
【问题描述】：

我有一个下拉菜单，它使用foreach 循环从数组中动态获取值。我知道 javascript "getElementById" 需要一个唯一的密钥。问题是我的唯一键是"service_select" 和"$value2" 的组合。这样每个服务都可以不止一个。

我从下拉元素中获得的唯一唯一键是变量$value。

<?php
echo'<select id="service_name" name="service_select">';
foreach($array_name_new as $key=>$value)
{
   echo'<option value="'.$value.'">'.$value.'</option>';
}
echo'</select>';

echo'<p>Parameter:  <input name=\"$value2\" value=\"$value2\'/></p>';    
?>

对于保管箱中的每个选定值，我想要一个“复选框”，其中保管箱选择作为名称和值。我需要一个以"$value2" 作为值的单独文本字段。

我已经找到了这个帖子 (How to create list of checkboxes dynamically with javascript)，但我是 javascript 的新手，完全不了解代码。

函数"function populate()" 中的if 子句有什么作用？是这是为了生成复选框？
答案中的代码部分在哪里添加到原始代码中？

根据提到的线程，我尝试像这样修改我的代码：

<?PHP
.
.
.   
echo'<select id="service" name="service_select" onchange="add_service(this.id,$_POST['service_select'],$value2)">';
  foreach($array_command_name_new as $key=>$value)
  {
  echo'<option value="'.$value.'">'.$value.'</option>';
  }
echo'</select>';

$key2 = array_search($value,$command_in_hostfile[0]);
$value2 = $command_in_hostfile[1][$key2];

$id2 = compact("$_POST['service_select']", "value2");

<script type="text/javascript">         
function add_service($id2, $_POST['service_select'], $value2)
{
foreach($array_command_name_new as $key=>$value)
  {         
  var elementid = docuemnt.getElementById($id2);
  var checkbox = document.createElement('id');
  checkbox.type = "checked";
  checkbox.name = "$_POST['service_select']";
  checkbox.value = "$_POST['service_select']";
  checkbox.id = "$id";
  var label = document.createElement('$_POST['service_select']')
  label.htmlFor = "id";
  label.appendChild(document.createTextNode('$_POST['service_select']');
  container.appendChild(checkbox);
  container.appendChild(label);
  }

echo'<p>Parameter:  <input id="parameter" name=\"$value2\" value=\"$value2\' onclick="addService('value_parameter')" /> </p>';
var s1 = document.getElementById($id2);
}
</script>
.
.
.
?>

如果有人可以帮助我，我会很高兴。

【问题讨论】：

您从链接线程的代码中到底有什么不明白的？您可以使用 Firefox 的 DOM-Inspector 来了解您的链接线程所讨论的内容。为此创建一个非常简单的 html 页面。 DOM-Inspector 可以显示您创建的站点的元素层次结构。

标签： javascript php forms dynamic drop-down-menu

【解决方案1】：

恐怕解决方案会有点复杂...您需要为用户选择的每个值在表单中添加输入...

类似这样的：

[Option a]     Parameter: [__________]    [X]
[Option b]     Parameter: [__________]    [X]

[Please select... ][v]

每次用户选择一个新选项时，您必须添加一个新行以允许输入参数。

然后，您需要在每一行中添加一个 [X] 按钮，以便用户可以删除不需要的条目。

这是 Javascript 密集型 :)

【讨论】：

我的主要想法是，用户在下拉列表中选择选项并将参数添加为文本。通过Javascript，我只想用菜单中的值和带有参数的文本文件编写复选框。