从 select 和 jQuery 选择值时如何更改 Div 内容？

Question

嗨，我是 jQuery 的新手，我正在尝试解决这个问题：

从下拉列表 ( <select> ) 中选择一个值时，您需要使用所选值更改 div 标签（红色）的内容。 请使用jQuery来解决这个测试，并且请不要在上面的HTML代码中添加任何id/class！

我已经写了一个脚本但是它不起作用，你能帮忙吗

 var content = $( "div:gt(5)" ); $( "select" ).on( "click", function( event ) { content.html('6 products'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="toolbar-wrapper"> <div> <div> <label>Product Count</label> <div class="select-group"> <select> <option value="4 products" selected="selected">4 products</option> <option value="6 products">6 products</option> <option value="8 products">8 products</option> </select> </div> </div> <div>4 products</div> </div> </div>

Answer 1

在事件处理程序中使用this.value来获取在下拉列表中选择的值。

当您 select 从下拉列表中选择某项时，会触发change事件，而不是click 。

div:gt(5)不是应显示结果的 div 的正确选择器。 编号从0开始，所以它是 DIV 号4 。 您可以使用.eq(4)到 select 那个。

 var content = $("div").eq(4); $("select").on("change", function(event) { content.html(this.value); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="toolbar-wrapper"> <div> <div> <label>Product Count</label> <div class="select-group"> <select> <option value="4 products" selected="selected">4 products</option> <option value="6 products">6 products</option> <option value="8 products">8 products</option> </select> </div> </div> <div>4 products</div> </div> </div>

Answer 2

您可以使用> & position 选择器进行定位。

$( "select" ).on( "change", function( event ) {
  $('.toolbar-wrapper > div > div:nth-child(2)').html(event.target.value);
});

小提琴！