2011-01-29 4 views
2

를 사용하여 첫 번째 위치에 표시되는 : 사용자가 옵션을 선택하고 양식을 제출옵션 설정이 좀 옵션이 선택 요소가 jQuery를

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

합니다. 데이터가 저장됩니다. 언제든지 사용자가 돌아올 때 이전에 저장된 옵션을 선택 요소 대신에 상단에 으로 표시 할 수 있습니다.

나는 그것을한다. 이쪽으로

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

그냥 옵션을 강조 표시하지만 선택 사항은 여전히 ​​첫 번째 요소입니다. 어떻게해야합니까?

+0

에 앞에 추가 하나, 그것을 처리하고 다음이 옵션을 넣어 –

+0

거기 에이 서버 쪽입니까? html로 옵션을로드하는 방법은 무엇입니까? 또는 그들은 하드 코딩되어 있습니까? – Victor

+0

크롬 확장 프로그램에서 작업 중이므로 자바 스크립트/jquery입니다. –

답변

4

는 소리. 이 경우

다만, 그 쿠키을 변경 이벤트에 결합하고, 선택한 옵션을 발견하고 그런 다음 쿠키를 설정하고 PHP를 사용할 수있는 #choose

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

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

+0

IE 11에서 작동합니까? 나는 그것을 시도했지만 그것을 작동하게 만들 수 없었다. 확인하고 제게 어디가 잘못되었는지 알려주십시오. http://stackoverflow.com/questions/38773319/set-the-selected-option-as-the-first-option-in-the-selectbox –

0

prepend 트릭을 수행해야합니다

var choose = $('#choose'); 
choose.val(2).prepend(choose.find('[value="2"]')); 
1
var prevSelVal = 2; 
if(prevSelVal!=0){ 
    var elem = $('#g' + prevSelVal).remove(); 
    $('#first').remove(); 
    $('#choose').prepend(elem); 
} 

은 위의 코드는 목록 상단에 배치합니다에서 요소를 제거합니다. 또한 '선택'요소가 제거됩니다.

0

은 참조 : 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>