由js

Question

顯示select in new td我需要在class =「contentsr」中顯示js的選擇id，此代碼顯示class =「contentsr」中的所有內容，我們需要show first first in first class =「contentsr」，然後select in第二類=「contentsr」

我的代碼是這樣的HTML和JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
<tr> 
<td> 
<select name="jens_id[]" class="jens_id" required=""> 
<option ></option> 
<option >1</option> 
<option >2</option> 
</select><span class="contentsr" ></span> 
</td> 
</tr> 
<tr> 
<td> 
<select name="jens_id[]" class="jens_id" required=""> 
<option ></option> 
<option >1</option> 
<option >2</option> 
</select><span class="contentsr" ></span> </td> 
</tr> 
</table> 
<script> 
$(document).ready(function() { 
$('.jens_id').change(function() { 
statteId = $(this).val(); // or this.value 
$('.contentsr').text(statteId).val(); 
}); 
}); 

Answer 1

的選擇USE next()僅次於<span>和html()對<span>

更改寫：$(this).next('.contentsr').html(statteId);

$(document).ready(function() { 
 
$('.jens_id').change(function() { 
 
statteId = $(this).val(); // or this.value 
 
$(this).next('.contentsr').html(statteId); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
<td> 
 
<select name="jens_id[]" class="jens_id" required=""> 
 
<option ></option> 
 
<option >1</option> 
 
<option >2</option> 
 
</select> 
 
<span class="contentsr" ></span> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td> 
 
<select name="jens_id[]" class="jens_id" required=""> 
 
<option ></option> 
 
<option >1</option> 
 
<option >2</option> 
 
</select><span class="contentsr" ></span> </td> 
 
</tr> 
 
</table>

Answer 2

您的類旁邊是你選擇的元素，所以你可以使用next()獲得所選元素

的下一個跨度

<script> 
$(document).ready(function() { 
$('.jens_id').change(function() {  
statteId = $(this).val(); // or this.value 
$(this).next().text(statteId); 

}); 
}); 
</script> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
<td> 
 
<select name="jens_id[]" class="jens_id" required=""> 
 
<option ></option> 
 
<option >1</option> 
 
<option >2</option> 
 
</select><span class="contentsr" ></span> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td> 
 
<select name="jens_id[]" class="jens_id" required=""> 
 
<option ></option> 
 
<option >1</option> 
 
<option >2</option> 
 
</select><span class="contentsr" ></span> </td> 
 
</tr> 
 
</table> 
 

 
<script> 
 
$(document).ready(function() { 
 
$('.jens_id').change(function() {  
 
statteId = $(this).val(); // or this.value 
 
$(this).next().text(statteId); 
 

 
}); 
 
}); 
 
</script>

Answer 3

這應該jQuery的修復你：下面的代碼

$(document).ready(function() { 
    $('.jens_id').change(function() { 
     var statteId = $(this).val(); // or this.value 
     $(this).next('.contentsr').text(statteId); 
    }); 
}); 

Answer 4

$('.jens_id').on('change', function(){ 
    $(this).next('.contentsr').text($(this).val()); 
}); 

Answer 5

用途：

$(this).closest($(this)).nextAll('.contentsr').html(statteId); 

insted的的

$('.contentsr').text(statteId).val(); 

Answer 6

基於您的代碼，你可以使用jquery兄弟姐妹的方法。

$(this).siblings('.contentsr').text(statteId).val();

Answer 7

statteId應該var statteId而$('.contentsr').text(statteId).val();到$('.contentsr').text(statteId);而Options應持有像<option value="Select Me" >Select Me</option><option value="1" >1</option>等一些值

您的完整代碼應

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
    <tr> 
     <td> 
      <select name="jens_id[]" class="jens_id" required=""> 
       <option value="Select Me">Select Me</option> 
       <option value="1">1</option> 
       <option value="2">2</option> 
      </select> 
      <span class="contentsr" ></span> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <select name="jens_id[]" class="jens_id" required=""> 
       <option value="Select Me">Select Me</option> 
       <option value="1">1</option> 
       <option value="2">2</option> 
      </select> 
      <span class="contentsr" ></span> 
     </td> 
    </tr> 
</table> 
<script> 
$(document).ready(function() { 
    $('.jens_id').change(function() { 
     var statteId = $(this).val(); // or this.value 
     $(this).closest('.contentsr').text(statteId); 
    }); 
}); 
</script> 

Answer 8

使用.next()得到一個同級.contentsr跨度節點

$(document).ready(function() { 
 
    $('.jens_id').change(function() { 
 
    statteId = $(this).val(); // or this.value 
 
    $(this).next(".contentsr").text($(this).val()) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <select name="jens_id[]" class="jens_id" required=""> 
 
<option ></option> 
 
<option >1</option> 
 
<option >2</option> 
 
</select> &nbsp;&nbsp;<span class="contentsr"></span> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <select name="jens_id[]" class="jens_id" required=""> 
 
<option ></option> 
 
<option >1</option> 
 
<option >2</option> 
 
</select> &nbsp;&nbsp;<span class="contentsr"></span> </td> 
 
    </tr> 
 
</table>