제이쿼리 변수에 값 저장하는 질문이요
<select id="tag" >
<option value="1">aaaaaa</option>
<option value="2" >bbbbbb</option>
<option value="3" >cccccc</option>
</select>
이렇게 만들어진 select 태그에
val name = $("#tag option:selected").val();
이렇게 제이쿼리로 셀렉트 박스에 선택된 값을 가져오려고 하는데 잘못되었나요?
값이 안들어가요
9개의 답변이 있어요!안녕하세요 질문자님.
말씀하신 대로 하시면 값이 가져와져야 하는게 정상입니다.
여기서 체크해보셔야 하는게 아래 항목 체크해보시면 될 것 같습니다.
1. jQuery 를 import 하셨나요??
2. 말씀하시는 선택된 "값" 이라는게 해당 태그에서는 2가지 의미로 볼 수 있습니다.
<option value="2" >bbbbbb</option>
option 뒤에 있는 value 인 "2" 가 지금 사용하셨던
$("#tag option:selected").val(); 로 가져와지는 value 값입니다.
혹시 말씀하시는 값이 bbbbb 를 원하시는거라면
$("#tag option:selected").text(); 로 가져올 수 있습니다.
안녕하세요. select태그내에서 value값을 가져오는데 어려움을 겪으시는군요.
아래 예제를 첨부하여 도움을 드리고자 합니다.
<select name="" id="tag">
<option value="1번 항목의 value 입니다.">1번 항목 입니다.</option>
<option value="2번 항목의 value 입니다.">2번 항목 입니다.</option>
<option value="3번 항목의 value 입니다.">3번 항목 입니다.</option>
</select>
<script>
//값을 읽어오거나 동작을 주고 싶으시면 변수를 설정하셔야 합니다.
//그리고 change 나 click과 같은 이벤트를 설정 하시면
//아래와 같은 결과물이 나옵니다.
//보시고 이해하시면 좋을 것 같습니다!
var tag = $('#tag');
$('#tag').change(function(){
var selectOptions = $(this).children('option:selected').val();
console.log(selectOptions);
});
</script>
도움이 되셨으면 좋겠습니다.
변수 선언에 오타가 있습니다.(Uncaught SyntaxError: Unexpected identifier) 오타 수정 후에 다시 해보세요.^^
val name = $("#tag option:selected").val(); --> var name = $("#tag option:selected").val();val name = $("#tag option:selected").val();
를 아래와 같이 바꾸셔야 합니다.
var name = $("#tag option:selected").val();
자바스크립트에서 변수 선언은
var, let, const 3가지로 할 수 있습니다.
var - 함수 내부에 선언된 변수만 지역변수로 한정하며, 나머지는 모두 전역변수로 간주
let - 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언
const - 블록 범위의 상수
안녕하세요.
아래와 같이 수정해보시기 바랍니다.
$("#tag > option:selected").text() "cccccc"val()은 현재 선택된 위치 혹은 번호를 반환합니다. 따라서 1,2,3중에 하나를 반환하구요,
text()를 하셔야 선택된 값을 반환하게 됩니다.
코틀린에서는 val(value)와 var(variable)의 형태가 있습니다만
자바스크립트에는 변수를 선언하는 방법에는 var, let, const 등이 있습니다.
따라서 아래와 같이 r을 l로 바꾸어보세요.
var name = $("#tag option:selected").val();안녕하세요.
코딩은 틀린게 없어 보입니다. script 오류가 났는지 확인해 보시고, script는 tag 하단에 들어가거나 onload 이벤트 이후 호출 되어야 합니다.
아래는 샘플인데 "값 확인" 버튼을 클릭하면 console에 값을 보여줍니다. 첫번째, 두번째 방법 둘 다 정상적인 코드입니다.
# html <select id="tag"> <option value="1">aaaaaa</option> <option value="2">bbbbbb</option> <option value="3">cccccc</option> </select> <button type="button" id="btnConfirm">값 확인</button> # javascript // onload 이벤트 jQuery(function($) { // "값 확인" 버튼 클릭 이벤트 $('#btnConfirm').on('click', function() { // 첫번째 방법 var name = $('#tag').val(); console.log('name :', name); // 두번째 방법 var name2 = $('#tag option:selected').val(); console.log('name2 :', name2); }); });출처 1 : https://dreamjy.tistory.com/44
소스코드 파일 다운로드 : https://github.com/sigmak/exercise4_01/tree/2021-06-06-html-jquery-option
[소스코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
//jQuery의 ready함수는 document가 준비되는 시점에 실행된다.
$(document).ready(function () {
// 초기 값 지정
$('#code').text('code : ' + $('#tag').find("option:selected").val());
$('#text').text('text : ' + $('#tag').find("option:selected").text());
// select 선택이 변경 됐을 때 호출 되는 함수
$('#tag').change(function() {
$('#code').text( 'code : ' + $(this).find("option:selected").val());
$('#text').text( 'text : ' + $(this).find("option:selected").text());
});
});
//출처: https://dreamjy.tistory.com/44 [컬쳐N라이프]
</script>
</head>
<body>
<select id="tag" >
<option value="1">aaaaaa</option>
<option value="2" >bbbbbb</option>
<option value="3" >cccccc</option>
</select>
<br/>
<br/>
<div id="code"></div>
<div id="text"></div>
</body>
</html>
[실행결과 캡쳐]
// select box ID로 접근하여 선택된 값 읽기
$("#셀렉트박스ID option:selected").val();
// select box Name로 접근하여 선택된 값 읽기
$("select[name=셀렉트박스name]").val();
// 같은 방식으로 span과 같은 다른 태그도 접근 가능하다~
$("span[name=셀렉트박스name]").text();
// 선택된 값의 index를 불러오기
var index = $("#셀렉트박스ID option").index($("#셀렉트박스ID option:selected"));
// 셀렉트 박스에 option값 추가하기
$("#셀렉트박스ID").append("<option value='1'>1번</option>");
// 셀렉트 박스 option의 맨앞에 추가 할 경우
$("#셀렉트박스ID").prepend("<option value='0'>0번</option>");
// 셀렉트 박스의 html 전체를 변경할 경우
$("#셀렉트박스ID").html("<option value='1'>1차</option><option value='2'>2차</option>");
// 셀렉트 박스의 index별로 replace를 할 경우
// 해당 객체를 가져오게 되면, option이 다수가 되므로 배열 객체가 되어 eq에 index를 넣어 개별 개체를 선택할 수 있다.
$("#셀렉트박스ID option:eq(1)").replaceWith("<option value='1'>1차</option>");
// 직접 index 값을 주어 selected 속성 주기
$("#셀렉트ID option:eq(1)").attr("selected", "selected");
// text 값으로 selected 속성 주기
$("#셀렉트ID")val("1번").attr("selected", "selected");or
$("#id").text("1번").attr("selected", "selected");
// value 값으로 selected 속성 주기
$("#셀렉트ID").val("1");or
$("#id").val("1").prop("selected", true);
// 해당 index item 삭제하기
$("#셀렉트ID option:eq(0)").remove();
// 첫번째, 마지막 item 삭제하기
$("#셀렉트ID option:first").remove();
$("#셀렉트ID option:last").remove();
// 선택된 옵션의 text, value 구하기
$("#셀렉트ID option:selected").text();
$("#셀렉트ID option:selected").val();
// 선택된 옵션의 index 구하기
$("#셀렉트ID option").index($("#셀렉트ID option:selected"));
// 셀렉트박스의 아이템 갯수 구하기
$("#셀렉트ID option").size();
// 선택된 옵션 전까지의 item 갯수 구하기
$("#셀렉트ID option:selected").prevAll().size();
// 선택된 옵션 후의 item 갯수 구하기
$("#셀렉트ID option:selected").nextAll().size();
// 해당 index item 이후에 option item 추가 하기
$("#셀렉트ID option:eq(0)").after("<option value='3'>3번</option>");
// 해당 index item 전에 option item 추가하기
$("#셀렉트ID option:eq(3)").before("<option value='2'>2번</option>");
// 해당 셀렉트 박스에 change event binding 하기
$("#selectID").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});
