如何将所选选项标记为已选中?

时间:2022-06-30 00:38:04

I am using ajax pagination where i am giving my users an opportunity to select record per page though provided option.The problem is every time the 1st option remains as selected no matter which option i am selecting!How to solve this problem so that only the selected option remains as selected!

我正在使用ajax分页,我给我的用户提供了选择每页记录的机会,虽然提供了选项。问题是每次第一个选项保持为选中,无论我选择哪个选项!如何解决这个问题,以便只有所选选项保持为选中状态!

jquery+ajax:

<script type="text/javascript">
$(document).ready(function(){
changePagination('0');    
});


function changePagination(pageId){

     $(".flash").show();
     $(".flash").fadeIn(800).html
         ('Loading <img src="ajax-loader.gif" />');

     var dataString = {pageId: pageId, recordsPerPage: $('select[name="rp"] option:selected').html()};
           type: "POST",
           url: "page.php",
           data: dataString,
           cache: false,
           success: function(result){
           $(".flash").hide();
           $("#pageData").html(result);
           }
      });
}
</script>

Option:

<select id="rp" name="rp" onChange=" changePagination();">
<option value="2">2</option>
<option value="6">6</option>
<option value="8">8</option>            
<option value="10">10</option>            
</select>

2 个解决方案

#1


If all you want is the current value of the select form element, then this will do:

如果你想要的只是select表单元素的当前值,那么这将是:

$(document).ready(function(){
  changePagination('0');    
});

function changePagination(pageId){
  alert( $('select[name="rp"]').val() );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="rp" name="rp" onChange="changePagination();">
<option value="2">2</option>
<option value="6">6</option>
<option value="8">8</option>            
<option value="10">10</option>            
</select>

#2


You can select one of the options and give selected property on it.

您可以选择其中一个选项并为其指定选定的属性。

// 'n' will be your index value for selecting and making one of the options stay selected.
$('#rp option').eq(n).attr('selected', true);
$('#rp option').eq(n).attr('selected', 'selected');

FYI

.attr() could not work properly in a certain jQuery version. If it happens to you, use prop() instead. Since selected is a property, not an attribute, using prop() would be semantically and synthetically right.

.attr()无法在某个jQuery版本中正常工作。如果它发生在您身上,请改用prop()。由于selected是属性,而不是属性,因此使用prop()在语义上和合成上都是正确的。

$('#rp option').eq(n).prop('selected', true);
$('#rp option').eq(n).prop('selected', 'selected');

#1


If all you want is the current value of the select form element, then this will do:

如果你想要的只是select表单元素的当前值,那么这将是:

$(document).ready(function(){
  changePagination('0');    
});

function changePagination(pageId){
  alert( $('select[name="rp"]').val() );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="rp" name="rp" onChange="changePagination();">
<option value="2">2</option>
<option value="6">6</option>
<option value="8">8</option>            
<option value="10">10</option>            
</select>

#2


You can select one of the options and give selected property on it.

您可以选择其中一个选项并为其指定选定的属性。

// 'n' will be your index value for selecting and making one of the options stay selected.
$('#rp option').eq(n).attr('selected', true);
$('#rp option').eq(n).attr('selected', 'selected');

FYI

.attr() could not work properly in a certain jQuery version. If it happens to you, use prop() instead. Since selected is a property, not an attribute, using prop() would be semantically and synthetically right.

.attr()无法在某个jQuery版本中正常工作。如果它发生在您身上,请改用prop()。由于selected是属性,而不是属性,因此使用prop()在语义上和合成上都是正确的。

$('#rp option').eq(n).prop('selected', true);
$('#rp option').eq(n).prop('selected', 'selected');