मेरे पास एक साधारण रूप है जो सर्वर से कुछ चुनिंदा तत्वों को लूप करता है। इस मामले में, मैं चुने गए प्रत्येक विकल्प मान को जोड़ना चाहता हूं और अक्षम नहीं करना चाहता हूं और जब भी उपयोगकर्ता इसके अंदर मूल्य बदलता है तो इन मानों की गणना इनपुट मान में दिखाता है। onchage इवेंट के साथ यह कैसे काम करता है। अग्रिम में धन्यवाद।

एचटीएमएल कोड उदाहरण

<form>
  <div class="form-group">
    <select class="1 presence-value form-control" name="presence-value" required>
      <option value="">-- Select--</option>
      <option value="1" selected>Full</option>
      <option value="0.5">Half</option>
      <option value="0">None</option>
    </select>
  </div>
  <div class="form-group">
    <select class="1 presence-value form-control" name="presence-value" required>
      <option value="">-- Select--</option>
      <option value="1" selected>Full</option>
      <option value="0.5">Half</option>
      <option value="0">None</option>
    </select>
  </div>
  
  <div class="form-group">
    <select class="2 presence-value form-control" name="presence-value" disabled required>
      <option value="">-- Select--</option>
      <option value="1">Full</option>
      <option value="0.5">Half</option>
      <option value="0" selected>None</option>
    </select>
  </div>
  <div class="form-group">
    <select class="2 presence-value form-control" name="presence-value" disabled required>
      <option value="">-- Select--</option>
      <option value="1">Full</option>
      <option value="0.5">Half</option>
      <option value="0" selected>None</option>
    </select>
  </div>

  <input type="number" value="0" required>
  <button type="submit">Submit</button>
</form>
1
Michel Setyawan Mulyono 13 जुलाई 2021, 09:36

2 जवाब

आप किसी भी चयन से परिवर्तन घटना को सुन सकते हैं, फिर उनके मूल्यों को एक साथ जोड़ सकते हैं

$(document).ready(function() {
  $('select').change(function() {
    let total = 0;
    $('select').each(function() {
      total += +$(this).val()
    })
    console.log('the total is', total)
    $('[name=total]').val(total)
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <select class="1 presence-value form-control" name="presence-value" required>
      <option value="">-- Select--</option>
      <option value="1" selected>Full</option>
      <option value="0.5">Half</option>
      <option value="0">None</option>
    </select>
  </div>
  <div class="form-group">
    <select class="1 presence-value form-control" name="presence-value" required>
      <option value="">-- Select--</option>
      <option value="1" selected>Full</option>
      <option value="0.5">Half</option>
      <option value="0">None</option>
    </select>
  </div>

  <div class="form-group">
    <select class="2 presence-value form-control" name="presence-value" disabled required>
      <option value="">-- Select--</option>
      <option value="1">Full</option>
      <option value="0.5">Half</option>
      <option value="0" selected>None</option>
    </select>
  </div>
  <div class="form-group">
    <select class="2 presence-value form-control" name="presence-value" disabled required>
      <option value="">-- Select--</option>
      <option value="1">Full</option>
      <option value="0.5">Half</option>
      <option value="0" selected>None</option>
    </select>
  </div>

  <input name='total' type="number" value="0" required>
  <button type="submit">Submit</button>
</form>
2
Kinglish 13 जुलाई 2021, 06:51

आपको सभी चुनिंदा टैग प्राप्त करने के लिए document.querySelectorAll('select') का उपयोग करने की आवश्यकता है और फिर selectedOptions द्वारा प्रत्येक चयनित टैग का चयनित मान प्राप्त करें और उनके योग की गणना करें।

उपरोक्त सभी क्रियाएं एक ही विधि में हैं (जैसे getSum) कि आप प्रत्येक चयनित टैग के onchange="getSum()" से बाइंड कर सकते हैं।

ध्यान दें कि यह समाधान शुद्ध जावास्क्रिप्ट कोड पर आधारित है और मैं किसी भी जेएस लाइब्रेरी का उपयोग नहीं करता हूं।

function getSum() {
            var selectes = document.querySelectorAll('select');
            sum = 0;
            for (var i = 0; i < selectes.length; i++) {
                sum += +selectes[i].value;
            }
            document.getElementById("submited").value = sum;
        }
<form>
        <div class="form-group">
            <select class="1 presence-value form-control" name="presence-value" required onchange="getSum()">
                <option value="">-- Select--</option>
                <option value="1" selected>Full</option>
                <option value="0.5">Half</option>
                <option value="0">None</option>
            </select>
        </div>
        <div class="form-group">
            <select class="1 presence-value form-control" name="presence-value" required onchange="getSum()">
                <option value="">-- Select--</option>
                <option value="1" selected>Full</option>
                <option value="0.5">Half</option>
                <option value="0">None</option>
            </select>
        </div>

        <div class="form-group">
            <select class="2 presence-value form-control" name="presence-value" disabled required onchange="getSum()">
                <option value="">-- Select--</option>
                <option value="1">Full</option>
                <option value="0.5">Half</option>
                <option value="0" selected>None</option>
            </select>
        </div>
        <div class="form-group">
            <select class="2 presence-value form-control" name="presence-value" disabled required onchange="getSum()">
                <option value="">-- Select--</option>
                <option value="1">Full</option>
                <option value="0.5">Half</option>
                <option value="0" selected>None</option>
            </select>
        </div>

        <input id="submited" type="number" value="0" required>
        <button type="submit">Submit</button>
2
Alireza Ahmadi 13 जुलाई 2021, 07:42