JavaScript를 사용하여 드롭다운 목록에서 선택한 값 가져오기

질문자 :Fire Hand

JavaScript를 사용하여 드롭다운 목록에서 선택한 값을 얻으려면 어떻게 해야 합니까?

아래 방법을 시도했지만 모두 값 대신 선택한 인덱스를 반환합니다.

 var e = document.getElementById("ddlViewBy"); function show(){ var as = document.forms[0].ddlViewBy.value; var strUser = e.options[e.selectedIndex].value; console.log(as, strUser); } e.onchange=show; show();

 <form> <select id="ddlViewBy"> <option value="1">test1</option> <option value="2" selected="selected">test2</option> <option value="3">test3</option> </select> </form>

다음과 같은 선택 요소가 있는 경우:

 <select id="ddlViewBy"> <option value="1">test1</option> <option value="2" selected="selected">test2</option> <option value="3">test3</option> </select>

이 코드 실행:

 var e = document.getElementById("ddlViewBy"); var strUser = e.value;

strUser 를 2 만들 것입니다. 실제로 원하는 것이 test2 경우 다음을 수행하십시오.

 var e = document.getElementById("ddlViewBy"); var strUser = e.options[e.selectedIndex].text;

strUser 를 test2 만드는 것은

Paolo Bergantino

일반 자바스크립트:

 var e = document.getElementById("elementId"); var value = e.options[e.selectedIndex].value; var text = e.options[e.selectedIndex].text;

제이쿼리:

 $("#elementId :selected").text(); // The text content of the selected option $("#elementId :selected").val(); // The value of the selected option

AngularJS : ( http://jsfiddle.net/qk5wwyct ):

 // HTML <select ng-model="selectItem" ng-options="item as item.text for item in items"> </select> <p>Text: {{selectItem.text}}</p> <p>Value: {{selectItem.value}}</p> // JavaScript $scope.items = [{ value: 'item_1_id', text: 'Item 1' }, { value: 'item_2_id', text: 'Item 2' }];

Vitalii Fedorenko

var strUser = e.options[e.selectedIndex].value;

이것은 정확하며 값을 제공해야 합니다. 당신이 찾고있는 텍스트입니까?

 var strUser = e.options[e.selectedIndex].text;

따라서 용어에 대해 명확합니다.

 <select> <option value="hello">Hello World</option> </select>

이 옵션에는 다음이 포함됩니다.

• 인덱스 = 0
• 값 = 안녕하세요
• 텍스트 = Hello World

Greg

다음 코드는 JavaScript를 사용하여 입력/선택 필드에서 값 가져오기/넣기와 관련된 다양한 예제를 보여줍니다.

소스 링크

작동하는 자바스크립트 및 jQuery 데모

 <select id="Ultra" onchange="run()"> <!--Call run() function--> <option value="0">Select</option> <option value="8">text1</option> <option value="5">text2</option> <option value="4">text3</option> </select><br><br> TextBox1<br> <input type="text" id="srt" placeholder="get value on option select"><br> TextBox2<br> <input type="text" id="rtt" placeholder="Write Something !" onkeyup="up()">

다음 스크립트는 선택한 옵션의 값을 가져와 텍스트 상자 1에 넣습니다.

 <script> function run() { document.getElementById("srt").value = document.getElementById("Ultra").value; } </script>

다음 스크립트는 텍스트 상자 2에서 값을 가져오고 해당 값으로 경고합니다.

 <script> function up() { //if (document.getElementById("srt").value != "") { var dop = document.getElementById("srt").value; //} alert(dop); } </script>

다음 스크립트는 함수에서 함수를 호출하고 있습니다.

 <script> function up() { var dop = document.getElementById("srt").value; pop(dop); // Calling function pop } function pop(val) { alert(val); }? </script>

Code Spy

var selectedValue = document.getElementById("ddlViewBy").value;

Mohammad Faisal

순수하게 Internet Explorer용으로 작성된 코드를 실행한 적이 있다면 다음과 같이 표시될 수 있습니다.

 var e = document.getElementById("ddlViewBy"); var strUser = e.options(e.selectedIndex).value;

Firefox 등에서 위를 실행하면 '함수가 아닙니다' 오류가 발생합니다. Internet Explorer를 사용하면 [] 대신 ()를 사용할 수 있기 때문입니다.

 var e = document.getElementById("ddlViewBy"); var strUser = e.options[e.selectedIndex].value;

올바른 방법은 대괄호를 사용하는 것입니다.

Carl Onager

<select id="Ultra" onchange="alert(this.value)"> <option value="0">Select</option> <option value="8">text1</option> <option value="5">text2</option> <option value="4">text3</option> </select>

모든 입력/양식 필드는 요소 내부에서 액세스할 때 "this" 키워드를 사용할 수 있습니다. 이렇게 하면 dom 트리에서 양식을 찾은 다음 양식 내부에서 이 요소를 찾을 필요가 없습니다.

boateng

JavaScript 또는 jQuery를 사용하여 이 작업을 수행하는 두 가지 방법이 있습니다.

자바스크립트:

 var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value; alert (getValue); // This will output the value selected.

또는

 var ddlViewBy = document.getElementById('ddlViewBy'); var value = ddlViewBy.options[ddlViewBy.selectedIndex].value; var text = ddlViewBy.options[ddlViewBy.selectedIndex].text; alert (value); // This will output the value selected alert (text); // This will output the text of the value selected

제이쿼리:

 $("#ddlViewBy:selected").text(); // Text of the selected value $("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'

Dulith De Costa

초보자는 ID 속성이 아닌 NAME 속성을 사용하여 선택에서 값에 액세스하기를 원할 것입니다. 우리는 모든 양식 요소가 ID를 얻기 전에도 이름이 필요하다는 것을 알고 있습니다.

따라서 새로운 개발자도 볼 수 있도록 getElementsByName() 솔루션을 추가하고 있습니다.

주의 양식 요소의 이름은 양식을 게시한 후 사용할 수 있도록 고유해야 하지만 DOM에서는 둘 이상의 요소에서 이름을 공유할 수 있습니다. 그런 이유로 가능한 경우 양식에 ID를 추가하는 것을 고려하거나 양식 요소 이름 my_nth_select_named_x 및 my_nth_text_input_named_y 로 명시적입니다.

getElementsByName 사용 예:

 var e = document.getElementsByName("my_select_with_name_ddlViewBy")[0]; var strUser = e.options[e.selectedIndex].value;

Ben Greenaway

그냥 사용

• $('#SelectBoxId option:selected').text(); 나열된 텍스트를 얻기 위해

• $('#SelectBoxId').val(); 선택된 인덱스 값을 얻기 위해

Marvil Joy

이전 답변은 가능성, 코드의 직관성, id 대 name 사용으로 인해 여전히 개선의 여지가 있습니다. 선택한 옵션의 세 가지 데이터(색인 번호, 값 및 텍스트)를 읽을 수 있습니다. 이 간단한 크로스 브라우저 코드는 다음 세 가지를 모두 수행합니다.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo GetSelectOptionData</title> </head> <body> <form name="demoForm"> <select name="demoSelect" onchange="showData()"> <option value="zilch">Select:</option> <option value="A">Option 1</option> <option value="B">Option 2</option> <option value="C">Option 3</option> </select> </form> <p id="firstP">&nbsp;</p> <p id="secondP">&nbsp;</p> <p id="thirdP">&nbsp;</p> <script> function showData() { var theSelect = demoForm.demoSelect; var firstP = document.getElementById('firstP'); var secondP = document.getElementById('secondP'); var thirdP = document.getElementById('thirdP'); firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)'); secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value); thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text); } </script> </body> </html>

라이브 데모: http://jsbin.com/jiwena/1/edit?html,output .

id 는 화장용으로 사용해야 합니다. 기능적 형식을 위해 name 은 HTML5에서도 여전히 유효하며 계속 사용해야 합니다. 마지막으로 특정 위치에서 대괄호 대 대괄호를 사용하는 것을 염두에 두십시오. 이전에 설명했듯이 Internet Explorer(이전 버전)만 모든 곳에서 둥근 것을 허용합니다.

Frank Conijn

jQuery 사용:

 $('select').val();

user5846985

또 다른 솔루션은 다음과 같습니다.

 document.getElementById('elementId').selectedOptions[0].value

Javad Kargar

가장 간단한 방법은 다음과 같습니다.

 var value = document.getElementById("selectId").value;

Clairton Luz

작동 방식의 실행 예:

 var e = document.getElementById("ddlViewBy"); var val1 = e.options[e.selectedIndex].value; var txt = e.options[e.selectedIndex].text; document.write("<br />Selected option Value: "+ val1); document.write("<br />Selected option Text: "+ txt);

 <select id="ddlViewBy"> <option value="1">test1</option> <option value="2">test2</option> <option value="3" selected="selected">test3</option> </select>

참고: 드롭다운이 변경되더라도 값은 변경되지 않습니다. 해당 기능이 필요한 경우 onClick 변경을 구현해야 합니다.

Ani Menon

querySelector 를 사용할 수 있습니다.

예

 var myElement = document.getElementById('ddlViewBy'); var myValue = myElement.querySelector('[selected]').value;

Rounin

나는 이것을 달성하는 방법에 대해 약간 다른 견해를 가지고 있습니다. 나는 일반적으로 다음 접근 방식을 사용하여 이 작업을 수행하고 있습니다(내가 아는 한 모든 브라우저에서 더 쉬운 방법이며 작동합니다).

 <select onChange="functionToCall(this.value);" id="ddlViewBy"> <option value="value1">Text one</option> <option value="value2">Text two</option> <option value="value3">Text three</option> <option value="valueN">Text N</option> </select>

ThomAce

이전 답변과 함께 진행하기 위해 이것이 내가 한 줄로 수행하는 방법입니다. 선택한 옵션의 실제 텍스트를 가져오기 위한 것입니다. 이미 인덱스 번호를 얻는 좋은 예가 있습니다. (텍스트의 경우에는 이렇게 표시하고 싶었습니다.)

 let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text

드문 경우에 괄호를 사용해야 할 수도 있지만 이는 매우 드뭅니다.

 let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;

이 프로세스가 두 줄 버전보다 더 빠른지 의심스럽습니다. 나는 단순히 내 코드를 가능한 한 많이 통합하는 것을 좋아합니다.

불행히도 이것은 여전히 요소를 두 번 가져오므로 이상적이지 않습니다. 한 번만 요소를 잡는 방법이 더 유용하겠지만, 한 줄의 코드로 이것을 하는 것과 관련하여 나는 아직 그것을 알아내지 못했습니다.

Genko

2015년에는 Firefox 에서 다음도 작동합니다.

이자형. 옵션 .selectedIndex

Hector Llorens

내가 질문을 제대로 이해하지 못하는지 모르겠지만 이것은 저에게 효과적이었습니다. 예를 들어 HTML에서 onchange() 이벤트를 사용하십시오.

 <select id="numberToSelect" onchange="selectNum"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>

//자바스크립트

 function selectNum(){ var strUser = numberToSelect.value; }

이렇게 하면 클릭당 선택 드롭다운에 있는 값이 무엇이든 제공됩니다.

Olawale Oladiran

다음은 JavaScript 코드 라인입니다.

 var x = document.form1.list.value;

name="list" 라는 이름의 드롭다운 메뉴 name="form1" 양식에 포함되어 있다고 가정합니다.

Belgacem Ksiksi

최신 브라우저에서 querySelector:checked 의사 클래스를 사용하여 하나의 명령문에서 선택한 옵션을 검색할 수 있습니다. 선택한 옵션에서 필요한 모든 정보를 수집할 수 있습니다.

 const opt = document.querySelector('#ddlViewBy option:checked'); // opt is now the selected option, so console.log(opt.value, 'is the selected value'); console.log(opt.text, "is the selected option's text");

 <select id="ddlViewBy"> <option value="1">test1</option> <option value="2" selected="selected">test2</option> <option value="3">test3</option> </select>

Heretic Monkey

querySelector 를 사용해야 합니다. 이것은 또한 양식 요소에서 가치를 얻는 방법을 표준화합니다.

var dropDownValue = document.querySelector('#ddlViewBy').value;

바이올린: https://jsfiddle.net/3t80pubr/

Pal Singh

노력하다

 ddlViewBy.value // value ddlViewBy.selectedOptions[0].text // label 

 console.log( ddlViewBy.value ); console.log( ddlViewBy.selectedOptions[0].text );

 <select id="ddlViewBy"> <option value="1">Happy</option> <option value="2">Tree</option> <option value="3" selected="selected">Friends</option> </select>

Kamil Kiełczewski

event.target.value 가 나를 위해 트릭을 수행했습니다.

emptywalls

onchange 함수에서 이를 수행하는 쉬운 방법은 다음과 같습니다.

event.target.options[event.target.selectedIndex].dataset.name

zackify

선택 태그 자체에 이벤트 리스너를 연결할 수 있다고 생각합니다. 예:

 <script> document.addEventListener("DOMContentLoaded", (_) => { document.querySelector("select").addEventListener("change", (e) => { console.log(e.target.value); }); }); </script>

이 시나리오에서는 모든 옵션에 대한 값 속성이 있고 null이 아닌지 확인해야 합니다.

Emmanuel Onah

그냥 하세요: document.getElementById('idselect').options.selectedIndex

그런 다음 0부터 시작하는 인덱스 값을 선택합니다.

Knautiluz

여러 옵션이 있는 드롭다운 메뉴 만들기(원하는 만큼!)

 <select> <option value="giveItAName">Give it a name <option value="bananaShark">Ridiculous animal <ooption value="Unknown">Give more options! </select>

좀 웃기게 만들었습니다. 다음은 코드 스니펫입니다.

 <select> <option value="RidiculousObject">Banana Shark <option value="SuperDuperCoding">select tag and option tag! <option value="Unknown">Add more tags to add more options! </select> <h1>Only 1 option (Useless)</h1> <select> <option value="Single">Single Option </select>

예 스 니펫이 작동했습니다.

Dangerousgame

출처 : http:www.stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript