使用jQuery动态添加HTML单选按钮

时间:2013-08-01 08:08:18

标签: jquery forms dom dynamic input

作为jquery的初学者,我在表单和动态元素方面遇到了一些问题。我知道这里已经有了一些话题,但我已经尝试了很多东西而且没有任何工作。 只是精确度:我正在使用Phonegap。

就是这样。我有一个表格,我必须从BDD添加单选按钮。我有数据但无法在页面上显示。 这是我的表格。

<form action="form.php" method="post" id="catDec"> 
<div data-role="fieldcontain">
    <fieldset data-role="controlgroup" id="field">
        <!-- Here I want my set of radio button -->
    </fieldset>
        <br/>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <select name="selectTest" id="selectTest">
                    <option value="1">Value1</option>
                    <option value="2">Value2</option>
                    <option value="3">Value3</option>
                </select>
            </fieldset>
        </div><br/>
       <input type="checkbox" name="cbTest" id="cbTest" class="custom" />
       <label for="cbTest">Some random text</label>
    </fieldset>
</div>
<br/><br/>
<input type="submit" value="Continue" data-icon="arrow-r" ><br/>

这是我的js功能。

tableau[0]="value1";
tableau[1]="value2";
tableau[2]="value3";
tableau[3]="value4";

for (var i=1; i<tableau.length-1; i++) {
    //$("#field").append('<input type="radio" name="rb_catDec" id="'+tableau[i]+'" value="'+tableau[i]+'" checked="checked" />' );
    //$("#field").append('<label for="'+tableau[i]+'">'+tableau[i]+'</label><br/><br/>' );
    //$("#field").html('<input type="radio" name="rb_catDec" id="'+tableau[i]+'" value="'+tableau[i]+'" checked="checked" />' );
    //$("#field").html('<label for="'+tableau[i]+'">'+tableau[i]+'</label><br/><br/>' );
    $("<input type='radio' value='"+tableau[i]+"' />")
        .attr("id", tableau[i])
        .attr("name", "rb_name")
        .prependTo("field");
}
//$("#field").reload();

好吧,我尝试过使用.append和.html方法。用div来放置那些输入而不用。 我想这与我在加载页面后添加这些内容有关,但我找不到通过它的方法。

有人可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

尝试替换此代码:

.prependTo("field");

用这个:

.prependTo("#field");

因为,您希望将所有单选按钮添加到ID为#field的元素,而不仅仅是选择器field

参考:.prependTo()