Can't get the element id on an onChange event in JavaScript via JQuery

user_958464 0
Viewed 5548

I have this small HTML page which exposes my problem. I want to get the id of the first ancestor of my input element (#input-1). When the user changes the option value, the JavaScript code should get the id of the #li-1 element and display it. Unfortunately all I get is a undefined and I don't know why.

The parents() function should traverse up the DOM tree and find the li element, then get the id via the .attr() function

$("#input-1").on("change", function(elem) {
  var id = $(elem).parents("li").attr("id");
  alert(id);
})
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

  <li id="li-1">
    <div class="item-content item-input">
      <div class="item-inner">
        <div class="item-title item-label">Test</div>
        <div class="item-input-wrap">
          <select id="input-1">
            <option value="0">test0</option>
            <option value="1">test1</option>
          </select>
        </div>
      </div>
    </div>
  </li>
</body>
</html>

html jquery javascript
5 Answers

You have to use .closest()

$("#input-1").on("change", function(){
    var id = $(this).closest("li").attr("id");
    alert(id);
})

Also, there is no need to use elem in this case, just use this in $(this)

Demo

$("#input-1").on("change", function(elem) {
  console.log($(elem.target).closest("li").attr("id"))
  var id = $(this).closest("li").attr("id");
  alert(id);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="li-1">
  <div class="item-content item-input">
    <div class="item-inner">
      <div class="item-title item-label">Test</div>
      <div class="item-input-wrap">
        <select id="input-1">
          <option value="0">test0</option>
          <option value="1">test1</option>
        </select>
      </div>
    </div>
  </div>
</li>

user_29432180

You have to use this keyword

 $(this).parents('li').attr('id')


$("#input-1").on("change", function(elem) {
  var id = $(this).parents('li').attr('id');
  console.log(id);
})
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

  <li id="li-1">
    <div class="item-content item-input">
      <div class="item-inner">
        <div class="item-title item-label">Test</div>
        <div class="item-input-wrap">
          <select id="input-1">
            <option value="0">test0</option>
            <option value="1">test1</option>
          </select>
        </div>
      </div>
    </div>
  </li>
</body>
</html>

user_43542010

I really advise to stop using jQuery for such simple operations, and learn how the DOM works. Here's the simple vanilla Javascript solution, which I consider so much cleaner.

What is being implicitly passed to an event listener is the Event object that triggers it.

If you need to access the element the event occurred on, either use an ES5 function (like in my code example) and access the element inside the handler function using this, or use an ES6 arrow function ( (event) => { /* ... */ }) and then access the element using event.target inside the handler function.

Please note that the HTML you've shown is actually invalid, because li cannot exist without a parent ul or ol.

document.getElementById('input-1').addEventListener('change', function(event) {
  console.log(this.closest('li').id);
})
<ul>
  <li id="li-1">
    <div class="item-content item-input">
      <div class="item-inner">
        <div class="item-title item-label">Test</div>
        <div class="item-input-wrap">
          <select id="input-1">
            <option value="0">test0</option>
            <option value="1">test1</option>
          </select>
        </div>
      </div>
    </div>
  </li>
</ul>

With ES6, you can even destructure the implicitly passed event object like this:

document.getElementById('input-1').addEventListener('change', ({target: elem})=>{
  console.log(elem.closest('li').id);
})
<ul>
  <li id="li-1">
    <div class="item-content item-input">
      <div class="item-inner">
        <div class="item-title item-label">Test</div>
        <div class="item-input-wrap">
          <select id="input-1">
            <option value="0">test0</option>
            <option value="1">test1</option>
          </select>
        </div>
      </div>
    </div>
  </li>
</ul>

 ({target: elem}) => { /* ... */ }

What this does: It says from the object passed to this function, get me the target property and make it available as elem inside the function.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Assigning_to_new_variable_names

user_37443040

Use .closest() or parent() You should get the parent of #input-1 not the select element

$("#input-1").on("change", function(){
        var id = $(this).closest('li').attr('id');
        alert(id);
    })

or 

 $("#input-1").on("change", function(){
            var id = $(this).parents('li').attr('id');
            alert(id);
        })
user_113330810

<select id="input-1" onchange="GetId();"> <option value="0">test0</option> <option value="1">test1</option> </select>

declare this method in script and call in onchange of dropdownlist

`function GetId(){   alert($('#input-1option:selected').attr("value"));}`

if it not working please check jquery library or replace that with given CDN <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

user_110543690
Related