Jquery Select 작업 방법

1. 옵션의 조작
2. select에서 선택한text와value 관련 값 가져오기
3. select가 선택한 Text와Value를 설정합니다.
4.select 이벤트 감청 변경
1. 옵션의 조작
jQuery가 select를 어떻게 제어하고 조작하는지.다음 html 코드를 먼저 보세요.

<select id="test">
<option value="1">   <option>
<option value="2">   <option>
                          ...
<option value="n">  N<option>
</select>

이른바 jQuery 조작'select'는 더 정확히 말하면 jQuery가'option'을 제어해야 한다. 아래의 jQuery 코드를 봐라.
//첫 번째 option의 값을 가져옵니다$('#test option:first').val(); //마지막 option의 값 $('#test option:last').val(); //두 번째 option의 값을 가져옵니다$('#test option:eq(1)').val(); //선택한 값을 가져옵니다$('#test').val(); $('#test option:selected').val(); //값이 2로 설정된 option은 선택된 상태입니다$('#test').attr('value','2'); //첫 번째 옵션을 $('#test option:last')로 설정합니다.attr('selected','selected'); $("#test").attr('value' , $('#test option:last').val()); $("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val());//select의 길이 $('#test option')을 가져옵니다.length; //option$("#test")를 추가합니다.append("ff"); $("ff").appendTo("#test"); //선택 항목 추가$('#test option:selected').remove(); //지정한 항목이 $('#test option:first')입니다.remove(); //지정된 값이 $('#test option') 삭제되었습니다.each(function(){ if( $(this).val() == '5'){ $(this).remove(); } }); $('#test option[value=5]').remove(); //첫 번째 그룹의 탭을 가져옵니다$('#test optgroup:eq(0)').attr('label'); //두 번째 그룹 아래 첫 번째 옵션의 값을 가져옵니다. ('#test optgroup:eq (1): option:eq (0)').val();
삭제 옵션 항목을 추가하면 select에 Option (하단 항목) $("#slc2") 를 추가합니다.append(""+i+"");select에 option (첫 번째 위치) $("#slc2") 를 삽입합니다.prepend(""을 선택하십시오).PS: prepend 는 일치하는 모든 요소 내부의 시작 부분에 내용을 삽입하는 가장 좋은 방법입니다.select에서 인덱스 값의 최대 option (마지막) $("#slc2 option:last") 를 삭제합니다.remove();select에서 인덱스 값이 0인 option (첫 번째) $("#slc2 option [index='0']") 를 삭제합니다.remove();select에서value='3'의 option$("#slc2 option[value='3']")를 삭제합니다.remove();select에서 text='4'의 option$("#slc2 option[text='3']")를 삭제합니다.remove();
2. select에서 선택한 text와value와 관련된 값을 가져오고 select가 선택한 Text를 가져옵니다: var checkText=$("#slc1").find("option:selected").text(); select에서 선택한value:var checkValue=$("#slc1")를 가져옵니다.val(); select에서 선택한 색인 값을 가져옵니다: var checkIndex=$("#slc1").get(0).selectedIndex; select에서 가장 큰 색인 값을 가져옵니다: var max Index=$("#slc1 option:last").attr("index"); 3. select가 선택한 Text와Value를 설정합니다. select 인덱스 값이 1인 항목 선택: $("#slc1").get(0).selectedIndex=1; select의value값을 4로 설정하는 항목 선택: $("#slc1").val(4); select의 Text 값을 JQuery 로 설정하려면 $("#slc1 option[text='jQuery']")를 선택합니다.attr("selected", true); PS: 특히 세 번째 사용에 주의하세요.JQuery의 선택기 기능이 이렇게 강력한지 봐라!
4.select 이벤트 감청 변경
$('.monitors_wj').change(function() {         var id = $(this).children('option:selected').val();     });