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

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

＆＃13;

＆＃13;

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

  });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

总而言之，我希望我的options select的{​​{1}}根据id=agreement_selected_service

被停用

Answer 1

您可以停用options，具体取决于value属性：

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>