Set an option to be displayed at first position using jQuery
I have a select element with some options:
<select id="choose">
<option id="first" value='null'>choose</option>
<option id="g1" value='1'>gate1</option>
<option id="g2" value='2'>gate2</option>
</select>
The user selects an option and submits the form. The data is stored. Anytime the user comes back I want t开发者_C百科he previously saved option to be display at the top of the select element, instead of choose.
I do it e.g. this way
$("#choose").val("2");
It just highlights the option in the list, but choose is still the first element. How do I accomplish that?
Sounds like you want to move the selected item to the top after they select it.
Just bind to the change event and the find the selected option and prepend it to the #choose
var choose = $("#choose").bind('change',function(){
choose.find('option:selected').prependTo(choose);
});
http://jsfiddle.net/petersendidit/ZuhqS/1/
var prevSelVal = 2;
if(prevSelVal!=0){
var elem = $('#g' + prevSelVal).remove();
$('#first').remove();
$('#choose').prepend(elem);
}
The code above removes the element from the list and places it at the top. It also removes your 'choose' element.
See: http://jsbin.com/ipewe/edit Here's a sample...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
</style>
</head>
<body>
<p>Hello from JS Bin</p>
<p id="hello"></p>
<select>
<option value="1" >Number 1</option>
<option value="2" selected="selected">Number 2</option>
<option value="3" >Number 3</option>
<option value="4" >Number 4</option>
</select>
<script type="text/javascript">
$('option:selected', 'select').removeAttr('selected').next('option').attr('selected', 'selected');
</script>
</body>
</html>
prepend should do the trick:
var choose = $('#choose');
choose.val(2).prepend(choose.find('[value="2"]'));
加载中,请稍侯......
精彩评论