关闭。这个问题需要更多 focused .它目前不接受答案。
想改进这个问题?更新问题,使其仅关注一个问题 editing this post .
3年前关闭。
Improve this question
假设我有一个输入框。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset id="chained-set">
<select id="qid1" class="form-control">
<option value="1">ONE5</option>
<option value="2">ONE6+</option>
<option value="3">ONE7+</option>
<option value="4">ONE8+</option>
</select>
<select id="qid2" class="form-control">
<option value="1">ONE5</option>
<option value="2">ONE6+</option>
<option value="3">ONE7+</option>
<option value="4">ONE8+</option>
</select>
<select id="qid3" class="form-control">
<option value="1">ONE5</option>
<option value="2">ONE6+</option>
<option value="3">ONE7+</option>
<option value="4">ONE8+</option>
</select>
<select id="qid4" class="form-control">
<option value="1">ONE5</option>
<option value="2">ONE6+</option>
<option value="3">ONE7+</option>
<option value="4">ONE8+</option>
</select>
<select id="id5" class="form-control">
<option value="1">ONE5</option>
<option value="2">ONE6+</option>
<option value="3">ONE7+</option>
<option value="4">ONE8+</option>
</select>
<select id="id6" class="form-control">
<option value="1">ONE5</option>
<option value="2">ONE6+</option>
<option value="3">ONE7+</option>
<option value="4">ONE8+</option>
</select>
</fieldset>
<input type="text" id="input" class="input">
我希望每个使用它的人都使用最新版本的 Chrome/Firefox,但有些人可能使用 IE。
最佳答案
$('input[id=input]').change(function() {
var value = parseInt($("#input").val());
if(value >= 0 && value <= 50){
$('select[id^="q"] option[value!=1]').hide();
$('select[id^="q"] option[value=1]').show();
$('select[id^="q"]').val('1');
}
else if(value >= 51 && value <= 100){
$('select[id^="q"] option[value!=2]').hide();
$('select[id^="q"] option[value=2]').show();
$('select[id^="q"]').val('2');
}
else if(value >= 101 && value <= 150){
$('select[id^="q"] option[value!=3]').hide();
$('select[id^="q"] option[value=3]').show();
$('select[id^="q"]').val('3');
}
else if(value >= 151){
$('select[id^="q"] option[value!=4]').hide();
$('select[id^="q"] option[value=4]').show();
$('select[id^="q"]').val('4');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset id="chained-set">
<select id="qid1" class="form-control">
<option value="1">ONE5</option>
<option value="2">ONE6+</option>
<option value="3">ONE7+</option>
<option value="4">ONE8+</option>
</select>
<select id="qid2" class="form-control">
<option value="1">ONE5</option>
<option value="2">ONE6+</option>
<option value="3">ONE7+</option>
<option value="4">ONE8+</option>
</select>
<select id="qid3" class="form-control">
<option value="1">ONE5</option>
<option value="2">ONE6+</option>
<option value="3">ONE7+</option>
<option value="4">ONE8+</option>
</select>
<select id="qid4" class="form-control">
<option value="1">ONE5</option>
<option value="2">ONE6+</option>
<option value="3">ONE7+</option>
<option value="4">ONE8+</option>
</select>
<select id="id5" class="form-control">
<option value="1">ONE5</option>
<option value="2">ONE6+</option>
<option value="3">ONE7+</option>
<option value="4">ONE8+</option>
</select>
<select id="id6" class="form-control">
<option value="1">ONE5</option>
<option value="2">ONE6+</option>
<option value="3">ONE7+</option>
<option value="4">ONE8+</option>
</select>
</fieldset>
<input type="text" id="input" class="input">
关于javascript - 显示/隐藏基于关闭输入数字范围的选择 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53627287/