如何通过单击another <td>字段在<td>中获取id的输入

Question

我是JavaScript和JQuery的新手。我在下面有两行

          <tr> 
             <td><label for="first_name">First Name</label>\</td> 

             <td id = "chessboard"><select name="first-name" id="first-name"><option value=""></option></select</td> 
         </tr> 

      <tr> 
        <td><label>Phone Number</label>\</td> 
        <td><input class="form-control" type="text" name="phone-number" id="phone-number"></td> 
      </tr> 

我想要做的是，当我点击名字的字段时，我会从电话号码行得到id的输入，它应该是" Phone - Number“

我在下面试过了，但不起作用

  $("#chessboard").on("click", function(cell){
     var y = document.getElementById('phone-number');
     console.log(y);
  });

Answer 1

嗯。确保在文档“就绪”后设置元素事件处理程序。

$(document).ready(function(){    
   $("#chessboard").on("click", function(){
     var y = $("#phone-number").val();
     console.log(y);
   });
});

Answer 2

这里的错误是希望通过父ID ( tr )获取tr标记中的select元素。事实上，这是错误的！因为如果单击select元素，则不会调用单击父元素(tr)的操作。因此，您必须直接引用select元素本身：

$("#first-name").on("click", function(cell){
 var y = document.getElementById('phone-number');
 console.log(y);

还要获取ID为Phone的元素的值：

var y = $( "#phone-number" ).val();