[HTML] select 박스 값 가져오기

select 태그 생성

<select>  
    <option value="값1">값1</option>  
    <option value="값2">값2</option>  
    <option value="값3">값3</option>
</select>

 

1) 선택된 값 확인

- id로 선택

$("[#select박스id] option:selected").val();

<select id="userListSB"> 
    <option value="홍길동">홍길동</option> 
    <option value="조석">조석</option> 
    <option value="아무개">아무개</option> 
</select>
 
<button type="button" id="selectbutton">값 가져오기</button>
 
<script>
  $(document).ready(function () {
        $('#selectbutton').click(function () {
         var select = $("#userListSB option:selected").val();
         console.log(select);
        });    
  });
</script>

 

- name로 선택

$("select[name=select박스name]").val();

<select name="userListname">
    <option value="홍길동">홍길동</option> 
    <option value="조석">조석</option> 
    <option value="아무개">아무개</option> 
</select>
<button type="button" id="selectbutton">값 가져오기</button> 
 
<script>
  $(document).ready(function () {
        $('#selectbutton').click(function () {
         //var select = $("#userListSB option:selected").val();
         var select = $("select[name=userListname]").val();
         console.log(select);
        });    
  });
</script>

 

 

2) 기본값 지정

See the Pen select box 1 by Dorad (@doradji) on CodePen.

 

 

3) 비활성화

<select disabled>
	<option value="값2" disabled>값2</option>  
</select>

See the Pen select box 2 by Dorad (@doradji) on CodePen.

 

 

4) 특정 option 목록에서 숨기기

<select>  
    <option value="값2" hidden>값2</option>  
</select>

See the Pen select box 3 by Dorad (@doradji) on CodePen.

 

5) 변화에 따른 val값 가져오기

See the Pen chane selectbox by Dorad (@doradji) on CodePen.

 

 

6) option 강제로 선택하기

- selectedIndex 사용

document.getElementById("selectbox").selectedIndex ="3"; // 값3 

var selectId = $("#selectbox option:selected").val();

- option value값으로 선택하기

 var select2 = $("#selectbox").val("값2").prop("selected", true); // 값2

- option 순서로 선택하기

var select = $("#selectbox option:eq(1)").prop("selected", true); // 값1

See the Pen select box 강제로 선택하기 by Dorad (@doradji) on CodePen.

 

 

 

 

 

---

https://java119.tistory.com/27

[jQuery] select  box 선택값 가져오기,value 값 여러 개 가져 오기

 

https://webisfree.com/2015-03-06/[html]-select-%ED%83%9C%EA%B7%B8(%EB%B0%95%EC%8A%A4)-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95

[HTML] select 태그(박스) 사용방법

 

https://hianna.tistory.com/322

[HTML] 콤보박스(select) (1) - 기본값 지정, 비활성화, 항목 비활성화

 

https://yjcorp.tistory.com/11

[jQuery] Select박스 option 값 선택하기