动态创建单选按钮？

发布于 2024-07-22 17:06:58 字数 1074 浏览 3 评论 0原文

参考使用 JQuery 创建动态单选按钮，我在想这怎么能如果在页面加载时从数据库检索输入值（“红色”或“蓝色”），则将进行处理。

以上面链接中的相同示例为例，如果红色、蓝色或其他动态值，我们如何动态构建单选按钮 - 红色 = 1 个单选按钮，蓝色 = 2 个单选按钮...等？我是新来的。我现在正在使用 grails 来尝试一下。有没有类似 jquery 的方法来做到这一点？我没有在 grails 中找到任何标签来实现这个！

编辑：有人向我指出 radioGroup（grails 标签），我想要的是一个基于 CSS 的类（包含 gif），包含需要根据不同值显示的不同图像。 - 类似于从数据库显示星级（不是基于用户选择） - 红色/蓝色等。

<select id="aaa">
    <option>red</option>
    <option>blue</option>
    <option>other</option>
</select>

<div id="abc">
    Input<br>
    option 1 <input type="radio" name="colorinput" value="1" />
    option 2 <input type="radio" name="colorinput" value="2"  />
</div>
<br>
<div id="def">
    Description<br>
    option 1 <input type="radio" name="colordesc" value="1" />
    option 2 <input type="radio" name="colordesc" value="2" />
</div>
<br>

原文

Referring to creating dynamic radio button w/ JQuery , I was thinking how can this be handled if the input value('red' or 'blue') is retrieved from the database on a page load.

Taking the same example from the above link, if Red, blue or other dynamic values, how can we build radio buttons on the fly - Red = 1 radio button, blue = 2 radio buttons...etc?
I am new to this. I am using grails at the moment to try this out. Is there a jquery-ish way to do it? I didn;t find any tags in grails to implement this!

EDIT: I was pointed out to radioGroup(grails tag), what I intend to have is a CSS based class(that contains a gif), containing different images that need to be shown based on different values. - something similar to showing star-rating from a database(not based on user selection) - red/blue etc.

<select id="aaa">
    <option>red</option>
    <option>blue</option>
    <option>other</option>
</select>

<div id="abc">
    Input<br>
    option 1 <input type="radio" name="colorinput" value="1" />
    option 2 <input type="radio" name="colorinput" value="2"  />
</div>
<br>
<div id="def">
    Description<br>
    option 1 <input type="radio" name="colordesc" value="1" />
    option 2 <input type="radio" name="colordesc" value="2" />
</div>
<br>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

江湖正好 2024-07-29 17:06:58

如果您确实想在页面加载时执行此操作（即不是响应 AJAX 请求），那么您不需要 JQuery，您需要 radioGroup grails 标签，其中 values 和 labels 参数由数据库查询结果填充。

回复收藏 0 原文

不弃不离 2024-07-29 17:06:58

尝试这个：

$(function(){ //$(document).ready(function(){ // same thing
    var colors=[];
    colors['red']=1;
    colors['blue']=2;
    colors['other']=3;
    $('#aaa').change(function(){
        var value = $(this).val();
        $('#abc, #def').find('input')
            .removeClass('red')
            .removeClass('blue')
            .removeClass('other');
        $('#abc, #def').find('input[value=' + colors[value] + ']).addCLass(value);
        });
    });

Try this:

$(function(){ //$(document).ready(function(){ // same thing
    var colors=[];
    colors['red']=1;
    colors['blue']=2;
    colors['other']=3;
    $('#aaa').change(function(){
        var value = $(this).val();
        $('#abc, #def').find('input')
            .removeClass('red')
            .removeClass('blue')
            .removeClass('other');
        $('#abc, #def').find('input[value=' + colors[value] + ']).addCLass(value);
        });
    });

回复收藏 0 原文

~没有更多了~