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

问题: 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...

问题:

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>


回答1:

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>


回答2:

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>


回答3:

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


回答4:

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);
        })

回答5:

You can try below code to get id of first option element:

$("#input-1:first-child").attr("id")


回答6:

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

  • 发表于 2019-07-05 23:52
  • 阅读 ( 400 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除