onChange of html 선택 시 매개 변수를 전달하는 방법

onChange of html 선택 시 매개 변수를 전달하는 방법

자바스크립트와 jQuery는 초보입니다.HTML 콤보박스 A를 하나 보여드리고 싶습니다.<select>그것을 선택해서id및 콘텐츠는 onChange()의 다른 위치에 있습니다.

선택한 콤보박스와 함께 전체 콤보박스를 전달하려면 어떻게 해야 합니까?idonChange 이벤트가 발생했을 때 다른 파라미터를 전달하려면 어떻게 해야 합니까?

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 이벤트에서 선택한 콤보 상자 값을 가져옵니다.

상황에 따라 편리할 수 있는 또 다른 접근법은 선택한 값을 전달하는 것입니다.<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>

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인 것은 아닙니다.차이점을 찾아보고 적절한 것을 사용하고 있는지 확인해야 합니다.

JavaScript 솔루션

<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>

@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기능은 브라우저에 의존합니다.두 번째 방법은 크로스브라우저에서 잘 작동하는 것 같습니다.

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>

문자열 "Mr"을 얻으려면 ('1'이 아닌) 첫 번째 옵션은 "1"이 아닙니다.

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

「 」를 참조해 주세요.

• .val() jQuery API 매뉴얼

이것은 나에게 도움이 된다.

선택한 경우:

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

라디오/체크박스의 경우:

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

Bellow code를 사용해 보세요.

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

HTML 템플릿:

<select class="staff-select">
   <option value="">All</option>
   <option value="196">Ivan</option>
   <option value="195">Jon</option>
</select>

Js 코드:

const $staffSelect = document.querySelector('.staff-select')

$staffSelect.onchange = function () {
  console.log(this.value)
}

다른 사용자가 종속 제품을 다운로드할 필요 없이 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);

이 코드는 on Change 이벤트에 대한 설명만 작성하면 이 코드를 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>

가 있었다=변화.setLocation($(this).val())

여기서.

    @Html.DropDownList("Demo", 
new SelectList(ViewBag.locs, "Value", "Text"), 
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });

심플:

function retrieve(){
alert(document.getElementById('SMS_recipient').options[document.getElementById('SMS_recipient').selectedIndex].text);
}

function retrieve_other() {
  alert(myForm.SMS_recipient.options[document.getElementById('SMS_recipient').selectedIndex].text);
}

function retrieve() {  alert(document.getElementById('SMS_recipient').options[document.getElementById('SMS_recipient').selectedIndex].text);
}

<HTML>
<BODY>
  <p>RETRIEVING TEXT IN OPTION OF SELECT </p>
  <form name="myForm" action="">
    <P>Select:
      <select id="SMS_recipient">
        <options value='+15121234567'>Andrew</option>
          <options value='+15121234568'>Klaus</option>
      </select>
    </p>
    <p>
      <!-- Note: Despite the script engine complaining about it the code works!-->
      <input type="button" onclick="retrieve()" value="Try it" />
      <input type="button" onclick="retrieve_other()" value="Try Form" />
    </p>
  </form>
</HTML>
</BODY>

출력: 선택한 항목에 따라 Klaus 또는 Andrew인덱스는.값을 원하는 경우 .text를 값으로 바꿉니다.단, 원하는 값(옵션의 텍스트가 아닌)일 경우 document.getElementById('SMS_recipient')를 사용합니다.가치

 //html code
   <select onchange="get(this)">
      <option value="a">1</option>
      <option value="b">2</option>
      <option value="c">3</option>
    </select>

//javscript code
   function get(select) {
      let value = select.value;  
      console.log(value);
    }
    

function setMyValue(v) {
  console.log(v);
}

<select onchange="setMyValue(this.value)">
  <option value="a">1</option>
  <option value="b">2</option>
  <option value="c">3</option>
</select>

언급URL : https://stackoverflow.com/questions/5024056/how-to-pass-parameters-on-onchange-of-html-select