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

Question

关闭。这个问题需要更多 focused .它目前不接受答案。












想改进这个问题？更新问题，使其仅关注一个问题 editing this post .

3年前关闭。




Improve this question




假设我有一个输入框。

如果您输入 0-50，那么它将显示值为 1 的每个选项，并仅以“q”开头的 id 隐藏其他选项。

如果您输入 51-100，它将显示值为 2 的所有选项；隐藏以“q”开头的其他选择选项。如果它没有“q”，则不要隐藏该选择的选项。

如果您输入 100-150，它将显示所有值为 3 的选项；使用以“q”开头的父选择 ID 隐藏其他选项。

如果你把151-99999或无限？它将显示值为 4 的所有选项；使用以“q”开头的父选择 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。

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