HTML 선택 변경시 매개 변수를 전달하는 방법


198

JavaScript와 jQuery의 초보자입니다. 하나의 콤보 상자 -A를 표시하고 싶습니다.이 HTML 은 onChange ()의 다른 위치에 <select>선택된 HTML id과 내용이 있습니다.

select을 사용하여 전체 콤보 상자를 전달하는 id방법과 onChange 이벤트가 발생하면 다른 매개 변수를 전달할 수 있습니까?


5
당신은 몇 가지 코드를 게시 할 수 있습니까?
KJYe.Name 葉家仁

답변:


372

function getComboA(selectObject) {
  var value = selectObject.value;  
  console.log(value);
}
<select id="comboA" onchange="getComboA(this)">
  <option value="">Select combo</option>
  <option value="Value1">Text1</option>
  <option value="Value2">Text2</option>
  <option value="Value3">Text3</option>
</select>

위의 예제는 OnChange 이벤트 에서 선택된 콤보 상자 값을 가져옵니다 .


고마워, 이것은 나를 위해 일했다. 기본적으로 다른 장소에 동일한 콤보 상자를 표시하고 싶습니다. 따라서 2 개의 콤보 상자에 2 개의 다른 ID를 부여했습니다. 어쨌든, 다른 장소에서 동일한 콤보 상자를 표시 할 수 있습니다. 어떤 도움이라도 대단히 감사하겠습니다.
Gendaful 2019

13
내부의 가치를 얻는 더 간결한 방법 getComboA()var value = sel.value;
Yony

4
선택 상자에 포커스가없는 경우에만 변경 이벤트가 발생합니다. 값이 변경된 직후에 이벤트를 시작하는 방법이 있습니까?
doABarrelRoll721

2
이 전체 선택 요소 보내는 전송) = 대신 this.value를 사용하고 작동합니다
콜린 Rickels

필자의 경우 코드는 Firefox에서는 작동하지만 Chrome에서는 작동하지 않습니다.
avijit bhattacharjee

50

어떤 상황에서는 다른 접근 방식이 유용 할 수 있습니다. 선택한 값을 다음 <option />과 같이 함수에 직접 전달하는 것입니다.

function myFunction(chosen) {
  console.log(chosen);
}
<select onChange="myFunction(this.options[this.selectedIndex].value)">
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
</select>


1
이것이 바로 내가 필요한 것입니다. 색상 견본을 클릭 할 때 색상 그림을 변경하는 자바 스크립트 기능이 이미 있습니다. 그러나 PayPal 드롭 다운 선택 옵션에서도 작동하도록 요청했습니다. 이것을 사용했지만 'value'를 사용하는 대신 (Paypal에 필요했기 때문에) 사진을 변경하는 데 사용한 변수 이름으로 각 옵션에 'label'을 추가했습니다. 완벽하게 일했습니다! 감사!!
FlashNoob468

5
이거 좋은데. 유효한 다른 옵션으로는 <select onChange = "myFunction (this.value)">
Daniel Silva

1
선택한 옵션의 다른 속성에 액세스하는 데 유용합니다.
Cees Timmerman

31

jQuery에서 수행하는 방법 :

<select id="yourid">
<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>
</select>

<script src="jquery.js"></script>
<script>
$('#yourid').change(function() {
  alert('The option with value ' + $(this).val() + ' and text ' + $(this).text() + ' was selected.');
});
</script>

또한 Javascript와 jQuery가 동일하지 않다는 것을 알아야합니다. jQuery는 유효한 JavaScript 코드이지만 모든 JavaScript가 jQuery는 아닙니다. 차이점을 찾아보고 적절한 것을 사용하고 있는지 확인하십시오.


2
나는 이것을 시도했지만 document.ready 메소드를 넣더라도 변경 기능이 호출되지 않습니다. 내 코드는 htmlData.push ( '<select id = "choose"name = "choose">'); $ ( '# choose'). change (function () {alert ( 'change called'); alert ( '값이'+ $ (this) .value () + '및 텍스트'+ $ (this) 인 옵션. text () + '가 선택되었습니다.'); 이것 좀 도와주세요
Gendaful

@ Gendaful : htmlData.push($('<select id="choose" name="choose">'));트릭을 수행해야합니다 (이전에 완전한 노드 대신 문자열을 푸시했습니다). > 6 년이 지났습니다 ...
Johannes

6

자바 스크립트 솔루션

<select id="comboA">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
<script>
 document.getElementById("comboA").onchange = function(){
    var value = document.getElementById("comboA").value;
 };
</script>

또는

<script>
 document.getElementById("comboA").onchange = function(evt){
    var value = evt.target.value;
 };
</script>

또는

<script>
 document.getElementById("comboA").onchange = handleChange;

 function handleChange(evt){
    var value = evt.target.value;
 };
</script>

이것이 가장 일반적이고 포괄적 인 솔루션입니다. 감사!
divs1210

5

@Piyush의 답변이 도움이되었으며, 추가하여 프로그래밍 방식으로 선택을 만들면 명확하지 않을 수있는이 동작을 얻는 중요한 방법이 있습니다. 함수가 있고 새로운 선택을 만든다고 가정 해 봅시다.

var changeitem = function (sel) {
  console.log(sel.selectedIndex);
}
var newSelect = document.createElement('select');
newSelect.id = 'newselect';

정상적인 행동은

newSelect.onchange = changeitem;

그러나 이것은 실제로 전달 된 인수를 지정하도록 허용하지 않으므로 대신 다음을 수행 할 수 있습니다.

newSelect.setAttribute('onchange', 'changeitem(this)');

그리고 당신은 매개 변수를 설정할 수 있습니다. 첫 번째 방법으로 수행하면 onchange함수에 대한 인수 는 브라우저에 따라 다릅니다. 두 번째 방법은 크로스 브라우저를 잘 작동하는 것 같습니다.


1
악의적 인 eval문자열을 코드로 변환 할 필요는 없습니다. newSelect.onchange = changeitem;changeitem을 다음과 같이 다시 작성하면 실제로 작동합니다 var changeitem = function () {console.log(this.selectedIndex); };(예 : this함수 인수 대신 사용 ). 또는 그대로두고 changeitem씁니다 newSelect.onchange = function () {changeitem(this); };.
Steve Byrnes

1
newSelect.setAttribute ( 'onchange', 'changeitem (this)'); -응원합니다
ghosh

5

jQuery 솔루션

선택한 옵션의 텍스트 값을 얻는 방법

선택 요소에는 일반적으로 액세스하려는 두 가지 값 이 있습니다.
먼저 서버로 보낼 이 있습니다.

$( "#myselect" ).val();
// => 1

두 번째는 선택 의 텍스트 값 입니다.
예를 들어 다음 선택 상자를 사용하십시오.

<select id="myselect">
  <option value="1">Mr</option>
  <option value="2">Mrs</option>
  <option value="3">Ms</option>
  <option value="4">Dr</option>
  <option value="5">Prof</option>
</select>

첫 번째 옵션 ( "1"대신)을 선택한 경우 "Mr"문자열을 얻으려면 다음과 같이하십시오.

$( "#myselect option:selected" ).text();
// => "Mr"  

또한보십시오


5

이것은 나를 위해 도움이됩니다.

선택 :

$('select_tags').on('change', function() {
    alert( $(this).find(":selected").val() );
});

라디오 / 체크 박스 :

$('radio_tags').on('change', function() {
    alert( $(this).find(":checked").val() );
});

3

벨로우즈 코드를 사용해 볼 수 있습니다

<select onchange="myfunction($(this).val())" id="myId">
    </select>

1

이 코드는 일단 선택시 onChange 이벤트를 설명하기 위해 작성하면이 코드를 html로 저장하고 작동하는 출력을 볼 수 있습니다.

<html>
    <head>
        <title>Register</title>
    </head>
    <body>
    <script>
        function show(){
            var option = document.getElementById("category").value;
            if(option == "Student")
                  {
                        document.getElementById("enroll1").style.display="block";
                  }
            if(option == "Parents")
                  {
                        document.getElementById("enroll1").style.display="none";
                  }
            if(option == "Guardians")
                  {
                        document.getElementById("enroll1").style.display="none";
                  }
        }
    </script>
            <form action="#" method="post">
                <table>
                    <tr>
                        <td><label>Name </label></td>
                        <td><input type="text" id="name" size=20 maxlength=20 value=""></td>
                    </tr>
                    <tr style="display:block;" id="enroll1">
                        <td><label>Enrollment No. </label></td>
                        <td><input type="number" id="enroll" style="display:block;" size=20 maxlength=12 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Email </label></td>
                        <td><input type="email" id="emailadd" size=20 maxlength=25 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Mobile No. </label></td>
                        <td><input type="number" id="mobile" size=20 maxlength=10 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Address</label></td>
                        <td><textarea rows="2" cols="20"></textarea></td>
                    </tr>
                    <tr >
                        <td><label>Category</label></td>
                        <td><select id="category" onchange="show()">    <!--onchange show methos is call-->
                                <option value="Student">Student</option>
                                <option value="Parents">Parents</option>
                                <option value="Guardians">Guardians</option>
                            </select>
                        </td>
                    </tr>
                </table><br/>
            <input type="submit" value="Sign Up">
        </form>
    </body>
</html>

1

누군가가 추가 의존성을 다운로드하지 않고 React 솔루션을 찾고있는 경우를 대비하여 다음과 같이 작성할 수 있습니다.

<select onChange={this.changed(this)}>
   <option value="Apple">Apple</option>
   <option value="Android">Android</option>                
</select>

changed(){
  return e => {
    console.log(e.target.value)
  }
}

다음과 같이 생성자에서 changed () 함수를 바인딩해야합니다.

this.changed = this.changed.bind(this);

0

이것은 나를 위해 onchange = 일했다. setLocation($(this).val())

여기.

    @Html.DropDownList("Demo", 
new SelectList(ViewBag.locs, "Value", "Text"), 
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.