Question

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

此外，每次单击按钮时，都应更改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，我只想点击一下按钮就可以更改下拉条目数的工作方式。

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

Answer 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");

Answer 2

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
        }                   
    });
});

}）;

Answer 3

$('#change-dropdown').click(function() {
    var option = $("#masterChart_length option:selected");
    $(option).next().attr("selected","selected");
    $(option).removeAttr("selected");
});

Jquery：按钮来查看下拉值并返回开头

3 个答案: