显示由js选择新的td

Question

我需要在课堂上用js显示选择ID =＆＃34; contentsr＆＃34; ，此代码显示所有在class =＆＃34; contentsr＆＃34;我们需要先显示第一个选择=＆＃34; contentr＆＃34;第二个选择第二个类=＆＃34; contentsr＆＃34;

我的代码是这个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

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

这应该可以解决你的问题：

$(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 of

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

Answer 6

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

根据您的代码，您可以使用jquery兄弟方法。

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

Answer 8

使用.next()获取下一个兄弟.contentsr span节点

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;