输入字段填充时清除下拉列表

Question

I want to clear my drop down and lock it when I select Input field. Here is my code

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

Here is my jquery code

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

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

with this code these two scenarios happen.

1) When I select input field first and fill it, drop down list become lock. (This is ok)

2) When I select drop down first and then try to fill input field. In this scenario i can fill input field. then drop down become locked. But I have to tap on screen to clear the drop down. i want to clear it when I fill the input field without any action.

I want to disable drop down instead of clear because of below reason. In here I want to save selected value of drop down to the assigned_to

as well as when user fill the input field it also saved in assigned_to variable in hidden input field.

It is require to fill only one field. If user fill the input field and do not disable drop down assigned_to variable replace with empty value. That's why I want to disable it.

Answer 1

You can start with something like this:

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

let me know.

Answer 2

This is my version based on your requirements, hope its relevant, please note: that I have removed the hidden attribute for checking if it gets populated, you may need to add that!

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