当文本框值介于某些值之间时，禁用特定的选择选项

Question

我有一个select 框，其中包含来自数据库的service_type 值。我有一个text box 用于word_count。

当我在word count 文本框中输入某个值时，我希望选择框取消填充/填充正确的服务。当字数过高或过低时，特定服务不可用。

例如，当word_count 为1201 时，不超过1200 的选项会被服务禁用。

我的第一个想法是通过 id 找到service select 的选项。但是我从数据库中填充了我的select。

这里是一些 js/html 代码，试图让这些 select-options 被禁用。

#agreement_selected_service 是id 的select

// word count

$(function() {
  $("#word-count").keyup(function() {
    var word_count = $(this).val();
    var service = $('#agreement_selected_service')
    if (word_count <= 1200) {
      // disable specific service options

    } else if (word_count <= 2400 && word_count >= 1201) {
      // disable specific service options
    }

  });
});

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


<div class="col-xs-7 ">
  <div class="form-group" style="">
    <label>Pricing Plan</label>

    <%= f.select :selected_service, ServiceType.all.order("id asc").collect {|x| [x.name, x.id]}, {}, :style => "width:100%;"%>

  </div>
</div>

<div class="col-xs-5">
  <div class="form-group" style="">
    <label>How many words?"</label>
    <%= f.text_field :char_amount, class: "form-control", id: 'word-count', style: 'width:120px;', placeholder: "Ex. 500" %>
  </div>
</div>

总而言之，我希望基于word-count 禁用我的select 和id=agreement_selected_service 的options

Answer 1

您可以根据value 属性禁用options：

let word_count = 1203,
    options = $('#agreement_selected_service option'),
    select = $('#agreement_selected_service')

if (word_count <= 1200) {
  options.each(function() {
    let tr = $(this)
    if (tr.val() <= 1200) tr.hide()
  });
} else if (word_count <= 2400 && word_count >= 1201) {
  options.each(function() {
    let tr = $(this)
    if (tr.val() <= 2400 && tr.val() >= 1201) tr.hide()
  });
}

select.change(function() {
  console.log($(this).val())  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="agreement_selected_service">

  <option value="100">Select a number of words</option>
  <option value="100">100</option>
  <option value="500">500</option>
  <option value="1000">1000</option>
  <option value="1500">1500</option>
  <option value="2000">2000</option>
  <option value="2500">2500</option>
</select>