使用jQuery从select中选择值时,如何更改Div内容?

AndrÃ©s BolÃvar • 3 年前 • 1559 次点击

嗨,我是jQuery的新手,我正在努力解决这个问题:

从下拉列表中选择值时( <select> ),则需要使用所选值更改div标记(红色)的内容。请使用jQuery来解决这个测试,请不要在上面的HTML代码中添加任何id/类!

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

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>

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/132708

1559 次点击

文章 [ 2 ] | 最新文章 3 年前

• 1 楼

Tamil Vendhan Kanagarasu 3 年前

你可以用 > & position selectors .

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

Fiddle !

• 2 楼

Barmar 3 年前

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

当您从下拉列表中选择某个内容时 change 事件被触发,而不是 click .

div:gt(5) 不是应该显示结果的div的正确选择器。编号始于 0 所以是DIV number 4 .你可以用 .eq(4) 选择那个。

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>

登录后回复