javascript:从下拉菜单中创建动态复选框

时间:2014-08-04 13:17:12

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

我有一个下拉菜单,可以从带有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的新手并且完全不理解代码。

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

根据提到的线程,我试图像这样修改我的代码:

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

如果有人能帮助我,我会很高兴。

1 个答案:

答案 0 :(得分:0)

我担心解决方案会更复杂一些......您需要为表单添加输入以供用户选择的每个值...

这样的事情:

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

[Please select... ][v]

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

然后,您需要在每行中使用[X]按钮,以便用户可以删除不需要的条目。

这是Javascript密集型:)