Question

我想检查一组选择框，看看点击按钮后它们是否发生了变化。

<select name="data[model][that]" class="location_dropdown">
    <option value="value1">value 1</option>
    <option value="value2">value 2</option>
    <option value="value3" selected="selected">value 3</option>
</select>

<select name="data[model][that]" class="location_dropdown">
    <option value="value1">value 1</option>
    <option value="value2" selected="selected">value 2</option>
    <option value="value3">value 3</option>
</select>

<select name="data[model][other]" class="location_dropdown">
    <option value="value1" selected="selected">value 1</option>
    <option value="value2">value 2</option>
    <option value="value3">value 3</option>
</select>

$(document).ready(function() {

    $('#update-selected-btn').click(function(){
        $('.location_dropdown').each(function(){



        });
    });

    if state hasnt changed on any drop downs alert("nothing selected")

});

显然无法使用onchange，因为我想在触发按钮点击时检查更改。我在考虑建立一组数值并相互检查它们，但想知道是否还有另一种解决方案。

更新

我确实尝试了这一点，但语法不对。

$('.location_dropdown').each(function(){
    if ($(this + " option:selected").prop('selected') == 'selected'){
       changed++;
    }
});

Answer 1

您可以使用全局变量来监控选择选择的变化。

<强> Live Demo

var dropdownChanged = false;
$('.location_dropdown').change(function(){    
     dropdownChanged = true;    
});


$('#update-selected-btn').click(function(){
    dropdownChanged = false;
});

Answer 2

您不需要使用全局变量，只要选择了某些内容，只需在select中添加数据属性，然后在按钮中单击查找包含属性的下拉列表。

Demo

     $('#update-selected-btn').click(function(){
        var selected = $('.location_dropdown[data-changed]'); //select the changed ones
        if(selected .length == 0)
        {
           alert('nothing selected'); return
        }
        selected .each(function(){
             //do something with them.
        });
    });

    $('.location_dropdown').change(function(){
        $(this).attr('data-changed', 'true'); //Add attribute to the selected ones.
    });

单击按钮后检查是否有任何选择框已更改

2 个答案:

Demo