select > option 태그의 상태에 대한 선택(drop down list)

select 리스트 생성

<select id="national">

<option value="한국">한국</option>

<option value="미국">미국</option>

<option value="일본">일본</option>

<option value="중국">중국</option>

</select>

 

선택한 value값에 따라 옆에 textbox를 만들어 객체 값 출력되도록 해보기

 

<label>선택한 나라 : </label>

<input type="text" id="result">

 

<script>

$("#national").change(selectChange);

 

function selectChange(){

// select 태그의 option 태그 중 선택 된 객체가 가진 값 변수에 저장

var value = $("option:selected").val();

console.log(value);

// id가 result인 요소의 값을 value로 변경

$("#result").val(value);

}

</script>

 

 

결과

한국 선택 시 텍스트박스에 출력

양나라 선택 시

시진핑핑국 선택 시

성진국 선택 시