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>
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>
You can target with >
& position selectors .
$( "select" ).on( "change", function( event ) {
$('.toolbar-wrapper > div > div:nth-child(2)').html(event.target.value);
});
Fiddle !
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.