Select 选项与相同的 CSS class 和 jQuery

Question

I am new to jQuery/JS and I have this problem: You can run my code and see that count is not correct:

 $('.form-control').change(function() { countTotal(); }); $('.form-control').change(function() { countTotal(); }); function countTotal() { var level1 = parseInt($(".form-control:selected").val(), 10); var level2 = parseInt($(".form-control:selected").val(), 10); var total = level1 * level1; $(".form-group > #riz").val(total); $(".form-group > #riz").attr("disabled", true); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <div class="form-group"> <select class="form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="form-group"> <select class="form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="form-group"> <input id="riz"> </div> <hr> <div class="form-group"> <select class="form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="form-group"> <select class="form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="form-group"> <input id="riz"> </div>

My HTML has to stay the same, I have to find some way to jQuery work in this example and keep the HTML structure the same. If you have any idea how to solve this, feel free to comment or share code ideas.
I appreciate your help!

Answer 1

There is multiple problems with your code.

First, you are using the same id multiple times. ID must be unique.

Second, think this is wrong var total = level1 * level1; should be var total = level1 * level2;

Third, you don't need to use :selected in $(".form-control:selected").val() , since $(".form-control").val() will always take the value of the selected option, if your element is a select.

Now I have changed both your html and jquery so it will work to your requirement.

Demo

 $('.form-control').change(function() { countTotal($(this)); }); function countTotal(ele) { var level1 = parseInt(ele.val() || 0, 10); var level2 = parseInt(ele.siblings(".form-control").val() || 0, 10); var total = level1 * level2; ele.closest(".form-group").next().find(".riz").val(total); ele.closest(".form-group").next().find(".riz").attr("disabled", true); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <div class="form-group"> <select class="form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select class="form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="form-group"> <input class="riz"> </div> <hr> <div class="form-group"> <select class="form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select class="form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="form-group"> <input class="riz"> </div>