'How to change a Div content when selecting a value from a select with a jQuery?

Hi I'm new to jQuery and I'm trying to solve this:

When selecting a value from the dropdown (<select>), you need to change the content of the div tag (in red) with the selected value. Please use jQuery to solve this test, and please don't add any id/class to the above HTML code!

I already wrote a script but it does not work, can you help please

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


Solution 1:[1]

Use this.value in the event handler to get the value that was selected in the dropdown.

When you select something from the dropdown, the change event is triggered, not click.

div:gt(5) is not the correct selector for the div where the result should be displayed. Numbering starts from 0, so it's DIV number 4. You can use .eq(4) to select that.

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>

Solution 2:[2]

You can target with > & position selectors.

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

Fiddle!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Barmar
Solution 2 Tamil Vendhan Kanagarasu

Related Questions