代码之家  ›  专栏  ›  技术社区  ›  Boris

显示/隐藏基于输入编号范围的选择jQuery[已关闭]

options range select jquery javascript
  •  0
  • Boris  · 技术社区  · 7 年前

    假设我有一个输入框。

    • 如果在0-50中输入,则它将显示每个值为1的选项,并仅隐藏id以“q”开头的其他选项。
    • 如果输入100-150,它将显示值为3的所有选项;隐藏父选择id以“q”开头的其他选项。
    • 如果输入151-99999或无限?它将显示值为4的所有选项;隐藏父选择id以“q”开头的其他选项。 

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

    4 回复  |  直到 7 年前
        1
  •  1
  •   rahim.nagori    7 年前 

    $("#input").on('keyup', function(){
                var inputVal = $("#input").val();
                if(inputVal >= 0 && inputVal <= 50){
                    console.log('zero to one');
                }else{
                    console.log('sorry');
                }
            })
        2
  •  1
  •   VinothRaja    7 年前

    试试下面这个 

    <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>
        3
  •  1
  •   Udhay Titus    7 年前 

    $('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">
        4
  •  0
  •   Harsh Madaiyar    7 年前 

        <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;");
                    }
                });
            }
        }
    });
}
    推荐文章
    Johnny T  ·  基于当前值的SQL合并表[重复]
    1 年前
    user28928120  ·  在textarea中选择文本,通过packspace/delete删除它,为另一个元素添加css
    1 年前
    anandyn02  ·  按名称连接两个表并分组
    2 年前
    David Robie  ·  删除以XXX开头并符合条件的列
    2 年前
    Nabeel Bhatti  ·  使用TABLE关键字SELECT all from vs SELECT*from TABLE_name
    2 年前
    swat  ·  在同一列上选择SQL语句
    2 年前
    Chenomorfo  ·  忽略下拉渲染选择项中的输入项-AntDesign
    2 年前
    tahzibi.jafar  ·  获取ORA-01722:无效数字错误,执行查询时
    2 年前
    Mae Smets  ·  两个字符之间的文本
    2 年前
    Santi  ·  Shadcn/ui选择-当用户选择项目时更改状态
    2 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号