Show/Hide Select 基于关闭输入数字范围 jQuery
Show/Hide Select Based Off Input Number Range jQuery
假设我有一个输入框。
- 如果您输入 0-50,那么它会显示每个值为 1 的选项,并仅隐藏其他带有以 "q" 开头的 ID 的选项。
- 如果你输入51-100,它会显示所有值为2的选项;隐藏以 "q" 开头的其他 select 选项。如果它没有 "q" 则不要隐藏 select 的选项。
- 如果你输入100-150,它会显示所有值为3的选项;使用以 "q".
开头的父 select id 隐藏其他选项
- 如果输入151-99999还是无穷大?它将显示值为 4 的所有选项;使用以 "q".
开头的父 select id 隐藏其他选项
<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。
我认为你需要一个免费的编码员/程序员。这只不过是将仅基于 if 和 else 条件。我只是为您提供一个样本/方式。尝试根据您的要求使用以下代码:
$("#input").on('keyup', function(){
var inputVal = $("#input").val();
if(inputVal >= 0 && inputVal <= 50){
console.log('zero to one');
}else{
console.log('sorry');
}
})
试试下面这个
<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" onchange="process(this.value);">
<script>
function process(value)
{
if(value>0 && value<=50)
{
$(".form-control option").attr('disabled', true);
$(".form-control option[value='1']").attr('disabled', false);
}
else if(value>50 && value<=100)
{
$(".form-control option").attr('disabled', true);
$(".form-control option[value='2']").attr('disabled', false);
}
else if(value>100 && value<=150)
{
$(".form-control option").attr('disabled', true);
$(".form-control option[value='3']").attr('disabled', false);
}
else
{
$(".form-control option").attr('disabled', true);
$(".form-control option[value='4']").attr('disabled', false);
}
}
</script>
$('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">
您可以试试下面的代码..
<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" onkeyup="myFunction()" class="input">
function myFunction()
{
$('select').each(function(){
var inp_val = $("#input").val();
var id_val = $(this).attr("id");
var idsbstr = id_val.substr(0,1);
if(idsbstr == "q")
{
if(inp_val >= 0 && inp_val <= 50)
{
$("#"+id_val+ " > option").each(function() {
console.log(this.text + ' ' + this.value);
if(this.value == "1")
{
$(this).removeAttr("style");
$("#"+id_val).val(this.value);
}
else
{
$(this).attr("style","display:none;");
}
});
}
if(inp_val >= 51 && inp_val <= 100)
{
$("#"+id_val+ " > option").each(function() {
console.log(this.text + ' ' + this.value);
if(this.value == "2")
{
$(this).removeAttr("style");
$("#"+id_val).val(this.value);
}
else
{
$(this).attr("style","display:none;");
}
});
}
if(inp_val >= 101 && inp_val <= 150)
{
$("#"+id_val+ " > option").each(function() {
console.log(this.text + ' ' + this.value);
if(this.value == "3")
{
$(this).removeAttr("style");
$("#"+id_val).val(this.value);
}
else
{
$(this).attr("style","display:none;");
}
});
}
if(inp_val >= 151)
{
$("#"+id_val+ " > option").each(function() {
console.log(this.text + ' ' + this.value);
if(this.value == "4")
{
$(this).removeAttr("style");
$("#"+id_val).val(this.value);
}
else
{
$(this).attr("style","display:none;");
}
});
}
}
});
}
假设我有一个输入框。
- 如果您输入 0-50,那么它会显示每个值为 1 的选项,并仅隐藏其他带有以 "q" 开头的 ID 的选项。
- 如果你输入51-100,它会显示所有值为2的选项;隐藏以 "q" 开头的其他 select 选项。如果它没有 "q" 则不要隐藏 select 的选项。
- 如果你输入100-150,它会显示所有值为3的选项;使用以 "q". 开头的父 select id 隐藏其他选项
- 如果输入151-99999还是无穷大?它将显示值为 4 的所有选项;使用以 "q". 开头的父 select id 隐藏其他选项
<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。
我认为你需要一个免费的编码员/程序员。这只不过是将仅基于 if 和 else 条件。我只是为您提供一个样本/方式。尝试根据您的要求使用以下代码:
$("#input").on('keyup', function(){
var inputVal = $("#input").val();
if(inputVal >= 0 && inputVal <= 50){
console.log('zero to one');
}else{
console.log('sorry');
}
})
试试下面这个
<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" onchange="process(this.value);">
<script>
function process(value)
{
if(value>0 && value<=50)
{
$(".form-control option").attr('disabled', true);
$(".form-control option[value='1']").attr('disabled', false);
}
else if(value>50 && value<=100)
{
$(".form-control option").attr('disabled', true);
$(".form-control option[value='2']").attr('disabled', false);
}
else if(value>100 && value<=150)
{
$(".form-control option").attr('disabled', true);
$(".form-control option[value='3']").attr('disabled', false);
}
else
{
$(".form-control option").attr('disabled', true);
$(".form-control option[value='4']").attr('disabled', false);
}
}
</script>
$('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">
您可以试试下面的代码..
<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" onkeyup="myFunction()" class="input">
function myFunction()
{
$('select').each(function(){
var inp_val = $("#input").val();
var id_val = $(this).attr("id");
var idsbstr = id_val.substr(0,1);
if(idsbstr == "q")
{
if(inp_val >= 0 && inp_val <= 50)
{
$("#"+id_val+ " > option").each(function() {
console.log(this.text + ' ' + this.value);
if(this.value == "1")
{
$(this).removeAttr("style");
$("#"+id_val).val(this.value);
}
else
{
$(this).attr("style","display:none;");
}
});
}
if(inp_val >= 51 && inp_val <= 100)
{
$("#"+id_val+ " > option").each(function() {
console.log(this.text + ' ' + this.value);
if(this.value == "2")
{
$(this).removeAttr("style");
$("#"+id_val).val(this.value);
}
else
{
$(this).attr("style","display:none;");
}
});
}
if(inp_val >= 101 && inp_val <= 150)
{
$("#"+id_val+ " > option").each(function() {
console.log(this.text + ' ' + this.value);
if(this.value == "3")
{
$(this).removeAttr("style");
$("#"+id_val).val(this.value);
}
else
{
$(this).attr("style","display:none;");
}
});
}
if(inp_val >= 151)
{
$("#"+id_val+ " > option").each(function() {
console.log(this.text + ' ' + this.value);
if(this.value == "4")
{
$(this).removeAttr("style");
$("#"+id_val).val(this.value);
}
else
{
$(this).attr("style","display:none;");
}
});
}
}
});
}