Очистить раскрывающийся список при заполнении поля ввода

Question

Я хочу очистить раскрывающийся список и заблокировать его при выборе поля ввода. Вот мой код

       <input type="text" class="form-control member-search" placeholder="Search by name" id="member">
       <input type="hidden" name="assigned_to" value="" id="assigned_to">


            <select class="form-control" name="assigned_to" id="drop-down">
            <option value="">Choose team member...</option>
              <% if @m.size >= 1 and !@m.include?("data") %>
                <% @m.each do |l| %>          
                    <% if l["account_user_id"] == session[:user_id] %> 
                      <option value="<%= l["id"] %>" selected><%= l["first"] %> <%= l["last"] %></option>
                    <% else %> 
                      <option value="<%= l["id"] %>"><%= l["first"] %> <%= l["last"] %></option>
                    <% end %>
                <% end %>
              <% end %>
            </select>

Вот мой jquery код

    <script>
     $('#drop-down').change(function(){
     $('#member').val('');
    });

     $('#member').change(function(){
     $('#drop-down').prop('disabled', true);
     $('#drop-down').val(''); 
    }); 
   </script>

с этим кодом эти два сценария ios случаются.

1) Когда я сначала выберите поле ввода и заполните его, выпадающий список станет заблокированным. (Это нормально)

2) Когда я сначала выбираю выпадающий список, а затем пытаюсь заполнить поле ввода. В этом случае я могу заполнить поле ввода. затем выпадающий становится заблокированным. Но я должен нажать на экран, чтобы очистить выпадающий список. Я хочу очистить его, когда я заполняю поле ввода без каких-либо действий.

Я хочу отключить выпадающий вместо очистки по следующей причине. Здесь я хочу сохранить выбранное значение раскрывающегося списка в assign_to

, а также, когда пользователь заполняет поле ввода, оно также сохраняется в переменной assign_to в скрытом вводе поле.

Необходимо заполнить только одно поле. Если пользователь заполнит поле ввода и не отключит раскрывающуюся переменную assign_to , замените ее пустым значением. Вот почему я хочу отключить его.

Answer 1

Это моя версия, основанная на ваших требованиях, надеюсь, она уместна, обратите внимание: что я удалил скрытый атрибут для проверки, заполняется ли он, вам может понадобиться добавить его!

// set initial
$('#assigned_to').val($('#drop-down').val());

$('#drop-down').change(function() {
  console.log('change', $(this).val());
  $('#member').val('');
  $('#assigned_to').val($(this).val());
});

$('#member').keyup(function() {
  console.log();
  $('#drop-down').prop('disabled', $(this).val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" class="form-control member-search" placeholder="Search by name" id="member">
<input name="assigned_to" value="" id="assigned_to">


<!-- <select class="form-control" name="assigned_to" id="drop-down">
            <option value="">Choose team member...</option>
              <% if @m.size >= 1 and !@m.include?("data") %>
                <% @m.each do |l| %>          
                    <% if l["account_user_id"] == session[:user_id] %> 
                      <option value="<%= l["id"] %>" selected><%= l["first"] %> <%= l["last"] %></option>
                    <% else %> 
                      <option value="<%= l["id"] %>"><%= l["first"] %> <%= l["last"] %></option>
                    <% end %>
                <% end %>
              <% end %>
            </select> -->
<select name="assigned_to" id="drop-down">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Answer 2

Вы можете начать с чего-то вроде этого:

$('#members').on('change', function() {
  $('#dropdownitems').prop("disabled", true);

});

$('#dropdownitems').on('change', function() {
  $('#members').prop("disabled", false);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropdownitems" name="subjectitems">
  <option value="0">--Select--</option>
  <option value="1">Something</option>
  <option value="2">Other</option>
</select>
<input type="text" name="Members" id="members" placeholder="Enter text" />

Дайте мне знать.