Question

我有一个带有一些选项的select元素：

<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>

用户选择一个选项并提交表单。数据存储。任何时候用户回来我都希望显示以前保存的选项在select元素的顶部，而不是选择。

我这样做，例如这样

$("#choose").val("2");

它只是突出显示列表中的选项，但选择仍然是第一个元素。我该如何做到这一点？

Answer 1

听起来您想在选中后将所选项目移动到顶部。

只需绑定到更改事件并找到所选选项并将其添加到#choose

var choose = $("#choose").bind('change',function(){
    choose.find('option:selected').prependTo(choose);
});

http://jsfiddle.net/petersendidit/ZuhqS/1/

Answer 2

var prevSelVal = 2;
if(prevSelVal!=0){
    var elem = $('#g' + prevSelVal).remove();
    $('#first').remove();
    $('#choose').prepend(elem);
}

上面的代码从列表中删除元素并将其放在顶部。它还会删除您的“选择”元素。

Answer 3

prepend应该这样做：

var choose = $('#choose');
choose.val(2).prepend(choose.find('[value="2"]'));

Answer 4

请参阅：http://jsbin.com/ipewe/edit 这是一个样本......

<!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>

使用jQuery设置要在第一个位置显示的选项

4 个答案: