jQuery：if語句到select一個選項值

Question

我的目標是：

1. 如果我輸入一個大於 60 的值，那么我希望選擇“Long”選項。
2. 如果我輸入一個小於 60 的值，那么我希望選擇“Short”選項。

在 jQuery 的幫助下，我希望在給定字段“值”的情況下自動更改“結果”

我有一個表單，包含一個輸入 integer 字段，id 為“value”，表單有一個選項字段，id 為“result”。

以下是我的嘗試，但它不起作用。

感謝您的輸入。

 var value = $('#value'); $(value).change(function() { debugger; if (Number($(this).val()) > 60) { $('#result').prop('value') = "Long"; } if (Number($(this).val()) < 60) { $('#result').prop('value') = "Short"; } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="value" class="col-form-label col-sm-4">Value</label> <div class="col-sm-7"> <input type="number" name="value" class="numberinput form-control" id="value"> </div> </div> <div><i>Result:</i></div> <div id="result" class="form-group row"> <div class="col-sm-12"> <select name="result" class="select2 form-control" style="width: 100%;" id="result"> <option value="Long">Long</option> <option value="Short">Short</option>

Answer 1

您可以使用.val(....)設置所選值。

 var value = $('#value'); $(value).change(function() { debugger; if (Number($(this).val()) > 60) { $('select').val("Long"); } if (Number($(this).val()) < 60) { $('select').val("Short"); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="value" class="col-form-label col-sm-4">Value</label> <div class="col-sm-7"> <input type="number" name="value" class="numberinput form-control" id="value"> </div> </div> <div><i>Result:</i></div> <div id="result" class="form-group row"> <div class="col-sm-12"> <select name="result" class="select2 form-control" style="width: 100%;" id="result"> <option value="Long">Long</option> <option value="Short">Short</option>

除此之外，您在 HTML 中存在一些問題，您已經多次使用相同的 ID ( result )。 ID 是唯一的。

正如@Archer 所提到的，如果值為60 ，則兩個當前條件都不匹配，您需要進行>=或<=比較來解決這些情況。

Answer 2

我在這里看到的三件事：

1. 您設置的值不正確。 而不是.prop('value') = 'Long' ，這是無效的 JavaScript，只需使用.val('Long') 。
2. 您正在重新使用“結果”ID，因此您定位到了錯誤的元素。 ID 必須是唯一的。
3. HTML 不完整。 可能不是問題的原因，但肯定值得修復。

所以更像這樣：

 var value = $('#value'); $(value).change(function() { debugger; if (Number($(this).val()) > 60) { $('#result').val('Long'); // 1. Setting the value correctly with jQuery } if (Number($(this).val()) < 60) { $('#result').val('Short'); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="value" class="col-form-label col-sm-4">Value</label> <div class="col-sm-7"> <input type="number" name="value" class="numberinput form-control" id="value"> </div> </div> <div><i>Result:</i></div> <div class="form-group row"> <.--- 2: Removing the errant ID ---> <div class="col-sm-12"> <select name="result" class="select2 form-control" style="width; 100%." id="result"> <option value="Long">Long</option> <option value="Short">Short</option> </select> <!--- 3. Correcting the remaining HTML ---> </div> </div>

Answer 3

 // No need to wrap '#value' twice with jQuery function $('#value').change(function() { // You do not need two ifs, since the two value are exclusive const option = $(this).val() > 60? "Long": "Short"; // You had two different elements with the id "result" // and.val is a function, you can pass the new value as argument $('#selection').val(option); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="value" class="col-form-label col-sm-4">Value</label> <div class="col-sm-7"> <input type="number" name="value" class="numberinput form-control" id="value" /> </div> </div> <div><i>Result:</i></div> <div id="result" class="form-group row"> <div class="col-sm-12"> <select name="result" class="select2 form-control" style="width: 100%;" id="selection"> <option value="Short">Short</option> <option value="Long">Long</option> </select> </div> </div>

Answer 4

i think,it will help you


  <script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function () {
        $("#value").on('input', function () {
            var value = parseInt($("#value").val());
            if (value > 60) {
                $("#result").prop("value", "Long");
            }
            if (value <= 60) {
                $("#result").prop("value", "Short");
            }
        });
    });
</script>



 <input type="number" name="value" class="numberinput form-control" id="value" />
 <select name="result" class="select2 form-control" style="width: 100%;" id="result">
  <option value="Short">Short</option>  <option value="Long">Long</option>
  </select>