我的目标是:
在jQuery的帮助下,我希望给定字段“值”的情况下“结果”会自动更改
我有一个表单,包含一个输入整数字段,其ID为“值”,表单具有一个选项字段,其ID为“结果”。
下面是我的尝试,但是不起作用。
感谢您的输入。
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>
答案 0 :(得分:5)
您可以使用.val(....)
设置选定的值。
.irs--round .irs-line {
height: 31px;
background-color: transparent;
}
.irs--round .irs-line:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #dee4ec;
z-index: 0;
}
var value = $('#value');
$(value).change(function() {
debugger;
if (Number($(this).val()) > 60) {
$('select').val("Long");
}
if (Number($(this).val()) < 60) {
$('select').val("Short");
}
})
此外,您在HTML中存在一些问题,您多次使用相同的ID(<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>
)。 ID应该是唯一的。
如@Archer所述,如果值为result
,则两个当前条件都不匹配,您需要进行60
或>=
比较以解决这些情况。
答案 1 :(得分:2)
我在这里看到的三件事:
.prop('value') = 'Long'
(不是有效的JavaScript),只需使用.val('Long')
。所以更像这样:
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>
答案 2 :(得分:1)
// 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>
答案 3 :(得分:0)
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>