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

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>

有了这段代码，这两种情况就会发生。

1( 当我首先选择输入字段并填充它时，下拉列表变为锁定。(没关系(

2( 当我先选择下拉，然后尝试填充输入字段时。在这种情况下，我可以填写输入字段。然后下拉菜单被锁定。但我必须点击屏幕才能清除下拉列表。我想在没有任何操作的情况下填充输入字段时清除它。

由于以下原因，我想禁用下拉菜单而不是清除。在这里，我想将下拉列表的选定值保存到assigned_to

以及当用户填充输入字段时，它也保存在隐藏输入字段中的assigned_to变量中。

只需要填写一个字段。如果用户填写输入字段并且没有禁用下拉菜单assigned_to变量，则用空值替换。这就是为什么我想禁用它。

Answer 1

您可以从以下内容开始：

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

让我知道。

Answer 2

这是我基于您需求的版本，希望与之相关，请注意：我已经删除了隐藏属性以检查它是否被填充，您可能需要添加它！

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