0

我有一个下拉列表。我想通过单击按钮来更改值。所以它应该遍历所有值直到结束，然后回到开始。

同样，每次单击按钮时，它都应该更改 innerHTML。

我不知道这是否可能。

所以这是我的下拉列表的 HTML：

<div id="masterChart_length" class="dataTables_length">
<label>Show 
<select size="1" name="masterChart_length" aria-controls="masterChart">
<option value="10" selected="selected">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="-1">All</option>
</select> 
entries</label>
</div>

这是要使用的按钮的 html：

<button type="button" id="change-dropdown" class="btn btn-primary pull-right">10</button>

我发现这篇文章Looping through selected values in multiple select combobox JQuery

但它使用此 Jquery 显示所有值：

jQuery(function($) {
    $('#change-dropdown').click(function() {
        $('#masterChart_length > :selected').each(function() {
            alert($(this).value());   // using text() here, because the 
        });                          // options have no value..?
    });
});

顺便说一句，我正在使用 Datatables，我想更改条目数下拉列表的工作方式，只需单击按钮。

任何建议或帮助将不胜感激！

4

3 回答 3

1 
jQuery(function($) {
 $('#change-dropdown').click(function() {
   $("#master_chartlength option:selected").removeAttr("selected").next().attr("selected","selected");
 });
});

我想您希望每次单击该按钮时该值都不断变化（下一个之后）

对于循环返回（如果需要），您可以添加条件

if($("#master_chartlength option:selected").is(":last-child"))
   $("#master_chartlength option:first").attr("selected","selected");
于 2013-07-25T08:56:39.633 回答
1 
jQuery(function($) {
    $('#change-dropdown').click(function() {        
        $('#masterChart_length :selected').each(function() {            
            var curElement = $(this).text();   // using text() here, because the                
            var nextElement = $(this).next();
            var nextElementText = $.trim(nextElement.text());
            if(nextElementText!=''){
            $(curElement).removeAttr('selected');
            $(nextElement).attr('selected',true);
            }else{
                //$(this).removeAttr('selected'); // reset here
                $('#masterChart_length option:first-child').attr("selected", "selected");
            }
        }); // options have no value..?     
        });
    });

通过代码更改更新了下面的答案，它还更改了按钮的文本

$(document).ready( function() {
  jQuery(function($) {
    $('#change-dropdown').click(function() {
        var oSelectBoxName = '#masterChart_length';
        var oSelectBox = $(oSelectBoxName+' :selected');
        var curElement = oSelectBox.text();   // using text() here, because the                 
        var nextElement = oSelectBox.next();

        var nextElementText = $.trim(nextElement.text());
        if(nextElementText!=''){
            $(this).html(nextElement.text());
            $(curElement).removeAttr('selected');
            $(nextElement).attr('selected',true);
        }else{
            var ofirstElement = $(oSelectBoxName+' option:first-child');
            $(this).html(ofirstElement.text());
            ofirstElement.attr("selected", "selected");// reset here
        }                   
    });
});

});

于 2013-07-25T09:02:36.957 回答
0 
$('#change-dropdown').click(function() {
    var option = $("#masterChart_length option:selected");
    $(option).next().attr("selected","selected");
    $(option).removeAttr("selected");
});
于 2013-07-25T09:07:32.677 回答