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

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

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

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

답변

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

<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.options[e.selectedIndex].value;

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

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

어느 것이 strUser될 것인가test2

답변

일반 자바 스크립트 :

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

jQuery :

$("#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'
}];

답변

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

답변

다음 코드는 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>

답변

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

답변

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;

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

답변

<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”키워드를 사용할 수 있습니다. 이를 통해 돔 트리에서 양식을 찾은 다음이 요소를 양식 안에 배치 할 필요가 없습니다.