jQuery：使用if语句选择选项值

Question

我的目标是：

1. 如果我输入的值大于60，则希望选择“长”选项。
2. 如果我输入的值小于60，则希望选择“短”选项。

借助jQuery的帮助，我希望根据“value”字段自动更改“result”。

我有一个表单，包含一个整数输入字段，其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>

- Jaco

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 ，则当前的两个条件都不会匹配，您需要进行>=或<=的比较来解决这些情况。

- Titus

---

已点赞，但请考虑如果值为60会发生什么，并将第二个“if”替换为“else”。我知道这不是被问到的，但很明显OP没有考虑过这一点，需要在这个方向上给予一些提示 :) - Reinstate Monica Cellio

Answer 2

我看到了三件事：

1. 您设置值的方式不正确。不要使用无效的JavaScript代码.prop('value') = 'Long'，而是直接使用.val('Long')。
2. 您重复使用了“result”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>

- David

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>

- giuseppedeponte

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>

- Nasira Mohamed Noufal