使用jQuery

Question

我有一个下拉列表，根据用户在下拉列表中选择的内容更改跨度的文本值。 演示：http://jsfiddle.net/ebstcrjy/

现在，我的代码定位到它看到的 next 范围。

我想根据班级startdate定位特定范围。

如何修改我的代码以定位此特定元素？

$(function() {         
    $('#usertype').change(function() {        
        $(this).next("span").text($('#usertype option:selected').text());
    });     
}); 

Answer 1

$(function() {         
    $('#usertype').change(function() {        
        $(this).siblings("span.startdate").text($('#usertype option:selected').text());
    });     
}); 

Answer 2

在jQuery中使用css class selector。根据您的标记，您只有一个使用startDate类的元素。如果您想要更具体，可以为该元素指定一个id，然后使用id选择器。

  $(function() {         
        $('#usertype').change(function() {        
            $(".startdate").text($('#usertype option:selected').text());
        });     
    }); 

来自文档：

  

jQuery（“。class”）类：

     

要搜索的课程。元素可以有   多班;只有其中一个必须匹配。

这是a working fiddle。

Answer 3

这将仅更改更改选择元素之后的.startdate范围：

$(function() {         
        $('#usertype').change(function() {        
            $(this).siblings('#' + $(this).attr('id') + '~span.startdate').text($('#usertype option:selected').text());
        });     
    }); 

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<form action="" method="post">
  <input type="hidden" id="myhidden3" name="quantity" value="1" />
  <span class="startdate">first span</span>
  <select id='usertype'>
    <option value='1'>Start Date</option>
    <option value='2'>End Date</option>
    <option value='3'>End Date</option>
  </select>
  <span>Hello!</span>
  <span class="startdate">Start Date</span>
</form>

Answer 4

jQuery使用css选择器：

$('.startdate').text($('#usertype option:selected').text());

Answer 5

只需按类型和类选择范围

$("span.startDate").text($('#usertype option:selected').text());