如何在动态创建的内容旁边显示“onclick”内容

Question

我有一个动态创建的列表，旁边显示单选按钮。当单选按钮被更改时，我想要一个下拉列表出现在动态创建的列表和已更改的单选按钮旁边。基本上，如果我将按钮更改为是（可见），我希望在其旁边显示一个下拉列表...所以取决于我的列表中有多少项目，并且取决于哪些项目设置为是，将是下拉列表似乎设置位置（每个动态创建的下拉列表中有8个相同的固定选项）。

到目前为止，我所提出的是在jquery中创建一个onchange事件并“取消隐藏”一个预制的下拉列表 - 代码工作正常，但它不是所需要的。我将发布以下代码和图片：

//K's function:
        function get_all_pages() {
        global $connection;
        $query = "SELECT * 
                FROM pages ";
        $query .= "WHERE visible = 1 ";
        $query .= "ORDER BY position ASC";
        $page_set = mysql_query($query, $connection);
        confirm_query($page_set);
        return $page_set;
    }
//K's function:
function list_all_pages(){
$output = "<ul>";
$page_set = get_all_pages();
while ($page = mysql_fetch_array($page_set)) {
$output .= "<li><a href=\"add_feature.php?page=" . urlencode($page["id"]) . "\">{$page["menu_name"]}</a></li>";
$output .= "&nbsp;&nbsp;<input type=\"radio\" class=\"unchecked\" onclick=\"uncheck()\" name=\"visible_{$page["id"]} \" value=\"0\" checked=\"checked\" /> No <input type=\"radio\" class=\"checked\" onclick=\"check()\" name=\"visible_{$page["id"]} \"value=\"1\" /> Yes";
    }
$output .= "</ul>";
return $output;
}   
---------- jquery
<script type="text/javascript">
 $(document).ready(function() {
//alert("document ready");
   $('#position').hide();


 });

$('.checked').change(function() {
     $('#position').show();
});
$('.unchecked').change(function() {
     $('#position').hide();
});
</script>

--------- html (not what is wanted but the only thing I've got going right now....

<form>
<?php echo list_all_pages(); ?>

<div id="position">

<select name="position">
var count;
for (count=1; count <= 8; count++) {
<option value='count'>count</option>;
        }
</select>

</div>

</form>  

截至8月27日的新信息 这是半工作，感谢redrazor11在jfiddle中的帮助...... php循环中的javascript onchange正在运行但仅适用于第一个<li> ...实际上当我点击另一个<li>无线电时按钮下拉菜单有时会出现在第一个<li>下...代码和新图片发布在下面：

    //K's function:
    function list_all_pages(){
    $output = "<ul>";
    $page_set = get_all_pages();
    while ($page = mysql_fetch_array($page_set)) {
    $output .= "<li><a href=\"add_feature.php?page=" . urlencode($page["id"]) . "\">{$page["menu_name"]}</a></li>";



    $output .= "&nbsp;&nbsp;<input onchange=\"javascript:document.getElementById(1).style.display = 'block';\" type=\"radio\" name=\"visible_{$page["id"]} \" value=\"0\" checked=\"checked\" /> No <input onchange=\"javascript:document.getElementById(1).style.display = 'none';\" type=\"radio\" name=\"visible_{$page["id"]} \"value=\"1\" /> Yes";

    $output .= "<div id='1' style='display: none'><select name='position'><option value='count'>1</option><option value='count'>2</option><option value='count'>3</option></select></div>";



        }
    $output .= "</ul>";
    return $output;
    }   

9月2日编辑： 我尝试使用$ counter作为ID，然后尝试使用$ page [id]并且两个返回的结果都可以在每个li中显示div ...但是onclick javascript似乎有问题工作正常...如果redrazor11或其他人可以看看，我可能会发布链接，也许可以找出onclick上发生的这种奇怪的行为？链接：

http://www.firetreegraphics.com/widget_corp-final/add_feature.php

这是最近更改的代码：

//K's function:
function list_all_pages(){
$output = "<ul>";
//$output .= $counter = 0;
$page_set = get_all_pages();
while ($page = mysql_fetch_array($page_set)) {
$output .= "<li><a href=\"add_feature.php?page=" . urlencode($page["id"]) . "\">{$page["menu_name"]}</a></li>";

$output .= "&nbsp;&nbsp;<div id=\"$page[id]\" style='display: none'><select name='position'><option value='count'>1</option><option value='count'>2</option><option value='count'>3</option></select></div>";

$output .= "&nbsp;&nbsp;<input onchange=\"javascript:document.getElementById('$page[id]').style.display = 'block';\" type=\"radio\" name=\"visible_{$page["id"]} \" value=\"0\" checked=\"checked\" /> No <input onchange=\"javascript:document.getElementById('$page[id]').style.display = 'none';\" type=\"radio\" name=\"visible_{$page["id"]} \"value=\"1\" /> Yes";

//$output .= $counter = $counter+1;

    }
$output .= "</ul>";
return $output;
}   

Answer 1

看到我在早期的堆叠交换帖子中找到的这个小提琴。

这个想法是用选择框隐藏div，直到你准备好显示/填充它为止。根据所选内容，您可以拥有不同的idd div。在这个例子中，它是一个导致内容出现的下拉列表，但对于单选按钮也是一个类似的想法。

http://jsfiddle.net/cpradio/YvN4Q/