显示/隐藏基于关闭的输入数字范围的jQuery

时间：2018-12-05 07:33:16

标签： javascript jquery select range options

假设我有一个输入框。

  • 如果您输入0-50，则它将显示每个选项的值为1，并且仅隐藏ID以“ q”开头的其他选项。
  • 如果您输入51-100，它将显示所有值为2的选项；隐藏以“ q”开头的其他选择选项。如果没有“ 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">

我希望所有人都将使用最新版本的Chrome / Firefox，但有些人可能会使用IE。

4 个答案:

答案 0 :(得分：1)

我认为您需要免费的编码器/程序员。这什么都不是，只会根据是否满足条件而定。我只是为您提供一个样本/方式。尝试在需要的条件下使用以下代码：

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

答案 1 :(得分：1)

在下面尝试

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

答案 2 :(得分：1)

$('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">

答案 3 :(得分：1)

您可以尝试下面的代码。

    <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;");
                    }
                });
            }
        }
    });
}
相关问题
最新问题