单击单选按钮更改下拉值答案

【问题标题】：Changing the dropdown value on click of radio button单击单选按钮更改下拉值
【发布时间】：2012-08-01 14:40:19
【问题描述】：

我正在使用带有 ibatis 和 jsp 页面的 spring 进行演示。我的问题是我有一个jsp页面和一个下拉列表的值我是通过model属性渲染的，如下图。

<select id="describe" style="width: 500px;">
    <c:forEach var="aff" items="${droplist}">
        <option name="category" value="${aff.community_category_id}">
            ${aff.category}
        </option>
    </c:forEach>
</select>

这是我的单选按钮：

<input type="radio" id="class" name="type" value="1" checked>Class
<input type="radio" id="Club" name="type" value="2">Club
<input type="radio" id="Course" name="type" value="3">Course
<input type="radio" id="Community" name="type" value="4">Community

点击任何单选按钮时，它需要更改下拉列表的内容。

我不明白的任何想法。

谢谢。

【问题讨论】：

所以您想更改<select> 列表中的所有<option> 项目，还是只选择已在<select> 列表中传播的特定<option>？
no 一旦页面加载，下拉菜单包含 5 个列表“假设”a,b,c d,e” 默认情况下“a”是可见的，并且当任何单选按钮即“俱乐部”是选中的 den 可见列表将是“d”而不是“a”。自动表示。

标签： jquery jsp spring-mvc

【解决方案1】：

        <head>
            <title>prova</title>
            <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
            <script>
                    var listA=[{name:'name1a', value:'value1a'}, {name:'name2a', value:'value2a'}, {name:'name3a', value:'valuea3a'}];
                    var listB=[{name:'name1b', value:'value1b'}, {name:'name2b', value:'value2b'}, {name:'name3b', value:'valuea3b'}];
                    var listC=[{name:'name1c', value:'value1c'}, {name:'name2c', value:'value2c'}, {name:'name3c', value:'valuea3c'}];
            </script>
            <script>
            $(document).ready(
                    function() {
                            $(':radio').bind('click',function(){
                                    $('#describe')
                                            .find('option')
                                            .remove()
                                            .end();
                                    $.each(listA, function(index, value) {
                                            $('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
                                    });

                            });
                    });
            </script>
    </head>
    <body>
            <div>
            <select id="describe">
                    <option name="name" value="1">a</option>
                    <option name="name" value="2">b</option>
            </select>
            </div>
            <div>
                    <input type="radio" id="class" name="type" value="1" checked>Class <br/>
                    <input type="radio" id="Club" name="type" value="2" >Club<br/>
                    <input type="radio" id="Course" name="type" value="3">Course<br/>
                    <input type="radio" id="Community" name="type" value="4">Community<br/>
            </div>
    </body>

这只会在您每次单击其中一个单选按钮并加载从 listA 对象中获取的新值/名称时更改描述选择的内容

【讨论】：