javascript - PHP 'add more' 具有多类别过滤的链接

Question

我希望用户能够通过多个类别选择来过滤项目。 目前，用户可以从下拉列表中选择一个类别，并且仅查看该类别中的项目。我想做的是，点击“添加更多”按钮，添加更多下拉菜单后，让用户选择更多类别

不确定如何为每个类别添加唯一的 ID。感谢任何帮助!

<script>
function addInput(divName, template){
      var newdiv = document.createElement('div');
      newdiv.innerHTML = document.getElementById(divName).innerHTML;
      document.getElementById(template).appendChild(newdiv);
}
</script>
<div id="template">
    <select name="category">
        <?php 
            $res = mysql_query("SELECT * FROM `categories` ORDER BY `id` ASC");
            if(mysql_num_rows($res) > 0){
                while($row = mysql_fetch_assoc($res)){
                    $id = $row['id'];
                    $name = $row['name'];                                                           

                    if($cat_id === $id) { 
                        echo '<option selected="selected" value="'.$id.'">'.$name.'</option>';
                    }else{ 
                        echo '<option value="'.$id.'">'.$name.'</option>';
                    }
                }                                           
            }                                   
        ?>
    </select>                                           
</div>
<div id="add_more_cat"></div>
<a href="javascript:void(0)" onClick="addInput('template', 'add_more_cat');">+ Add more</a>

Answer 1

可以为div设置属性。

<script>
function addInput(divName, template){
      var count=0;
      var newdiv = document.createElement('div');
      newdiv.innerHTML = document.getElementById(divName).innerHTML;
      newdiv.setAttribute("elem_id_"+count,document.getElementById('category').value) ;
      document.getElementById(template).appendChild(newdiv);
      count++;
}
</script>

这没有经过测试，但算法是:set new attributes对于新的div。然后get these attributes .