jQuery: if statement to select an option value

user_10778349 0
Viewed 413

My aim is:

  1. If I type a value bigger than 60, then I would like the option "Long" to be selected.
  2. If I type a value less than 60, then I would like the option "Short" to be selected.

With help of of jQuery, I would like for "result" to be automatically changed given the field "value"

I have a form, contains an input integer field, with id "value", and form has a option field with id "result".

Below is my try, but it does not work.

Thanks for your input.

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>

django jquery javascript
4 Answers

You can set the selected value using .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>

Beside that, you have some problems in the HTML, you've used the same ID (result) multiple times. IDs are meant to be unique.

As @Archer mentioned, none of the two current conditions will match if the value is 60, you will need to do a >= or <= comparison to account for those cases.

user_15525870

Three things I see here:

  1. You're setting the value incorrectly. Instead of .prop('value') = 'Long', which isn't valid JavaScript, just use .val('Long').
  2. You're re-using the "result" ID, so you're targeting the wrong element. IDs must be unique.
  3. The HTML is incomplete. Might not be a cause of the problem, but certainly worth fixing.

So something more like this:

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>

user_3281930 

// 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>

user_82186520 
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>
user_122159570
Related