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

Questions

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

April 23, 2022

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>

>Solution :

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>