jQuery:选中/取消选中复选框时更改下拉选项

时间:2012-03-27 09:42:27

标签: jquery forms select checkbox drop-down-menu

我有这样的表格:

<input type="checkbox" value="First" />First
<input type="checkbox" value="Second" />Second
<input type="checkbox" value="Third" />Third

<select name="first-drop">
    <option value="---">---</option>
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
</select>

有没有办法(使用JS / jQuery)只要取消选中first-drop复选框,我就可以将---的值更改为First

2 个答案:

答案 0 :(得分:3)

$('input[type="checkbox"][value="First"]').change(function (){
    $('select[name="first-drop"]').toggle();
});​

LIVE DEMO

请注意,我修复了你的标记:

<input type="checkbox" value="First" checked="checked" >First
<input type="checkbox" value="Second" />Second
<input type="checkbox" value="Third" />Third

<select name="first-drop">
    <option value="">---</option>
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
</select>​

<强>更新

你现在想要的是:

$('input[type="checkbox"][value="First"]').change(function() {
    if (!this.checked) {
        $('select[name="first-drop"] option:first').prop('selected', 'selected');
    }
});

<强> ​LIVE DEMO

如果您将提供DOM元素ID,则可以很简单:

$('#first').change(function() {
    if (!this.checked) 
        $('#nothing').prop('selected', 'selected');
});

更新了DOM:

<input type="checkbox" value="First" id="first" >First
<input type="checkbox" value="Second">Second
<input type="checkbox" value="Third">Third

<select name="first-drop">
    <option value="" id="nothing" >---</option>
    <option value="Option1" >Option1</option>
    <option value="Option2">Option2</option>
</select>​

<强> LIVE DEMO

答案 1 :(得分:2)

我在第一个复选框中添加了一个ID

<input id="first" type="checkbox" value="First">First</input>
<input type="checkbox" value="Second">Second</input>
<input type="checkbox" value="Third">Third</input>

<select name="first-drop">
    <option value="">---</option>
    <option value="Option1">Option1</option>
    <option value="Option2">$Option2</option>
</select>

<script type="text/javascript">
    $(function () {
        $("#first").click(function () {
            if ($(this)[0].checked == true) {
                $("[name='first-drop'] option:first").attr("selected", "selected");
            }
        });
    });​
</script>

演示:

http://jsfiddle.net/8BtYc/2/

编辑:修复我的代码,以便在取消选中第一个复选框时不会切换