选中复选框时更改下拉列表值

时间:2014-02-02 17:36:59

标签: jquery forms checkbox

我有这个表单,并且我想在选中复选框时保留下拉内容中的最高值:

<html>
<head><title>Check Box</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

</head>
<form>
<input type="checkbox" value="0" id="chk">Other
<input type="checkbox" value="1" id="chk1">Moderate incident
<input type="checkbox" value="2" id="chk2">Signifiant indcident
<input type="checkbox" value="3" id="chk3">Weather
<input type="checkbox" value="4" id="chk4">Severe
<input type="checkbox" value="2" id="chk5">Signifiant incident
<select id="test">
<option value="0">0 - Nothing important</option>
<option value="1">1 - Moderate incident</option>
<option value="2">2 - Signifiant incident</option>
<option value="3">3 - Weather Conditions</option>
<option value="4">4 - Severe incident</option>
</select>

</form>
<script>
$('input[type="checkbox"]').click(function(){

    if ($(this).is(':checked'))
        $("#test").val($(this).val());
});
</script>
</html>

如果选中复选框,则下拉列表中的值会更改,但如果复选框中的值小于已选中的值,则我不想更改下拉列表中的值,我希望最高值保留在下拉列表中。< / p>

例如:如果在下拉列表中,最高值为3,并且我检查值2,我不想仅在i检查值4时更改下拉列表中的值。

1 个答案:

答案 0 :(得分:0)

工作示例http://jsfiddle.net/xv33z/

$('input[type="checkbox"]').click(function () {
var x = $("#test").val();
    if ($(this).is(':checked')) {
        var y = $(this).val();
        if (x < y) {
            $("#test").val($(this).val());
        }
    }
});

首先,我们会在选中新复选框时保存#test的当前值。然后我们得到复选框的值。如果复选框的值大于选择框的值,则我们更新选择框。