Question

好的，这是我想要做的第一件事：

1）让我们说用户一直在向一个或两个输入字段添加文本。现在，如果用户要么选择选项值'Name1'或选择字段的选项值'Name2 '，则必须重置输入字段值。怎么办呢？

<div id='CustomerIsNotInDatabase'>
    <input id='vlastname' name='ulastname' type='text' value=''></input>
    <input id='vfirstname' name='ufirstname' type='text' value=''></input>
</div>

<div id='customerIsInDatabase'>
<select>
    <option selected='true' value=''>Choose</option>
    <option value='Name1'></option>
    <option value='Name2'></option>
</select>
</div>

2）现在反过来了：如果选择了选项值'Name1'或选项值'Name2'：如果值为''，如何将该值重置为第一个选项用户将文本添加到输入字段？

Answer 1

1。对于第一个问题。

如果用户要么选择选项值＆＃39; Name1＆＃39;或选项价值＆＃39; Name2＆＃39;选择字段的输入字段值必须重置

您可以使用change事件来处理用户更改并使用val('')重置输入：

$('#customerIsInDatabase select').change(function(){
     if ( $(this).val() != '' )
     {
         $('#vlastname').val('');
         $('#vfirstname').val('');
     }
});

2. 对于第二个问题。

如果任一选项值＆＃39; Name1＆＃39;或选项价值＆＃39; Name2＆＃39;已选中：如何将此值重置为第一个选项，其值为＆＃39;＆＃39;如果用户将文本添加到输入字段？

当keyup字段中显示任何密钥时，您可以使用input事件来检测用户操作：

$('#CustomerIsNotInDatabase input').keyup(function()
{
      $('#customerIsInDatabase select').val('').change();
});

希望这有帮助。

完整示例：

＆＃13;

$('#customerIsInDatabase select').change(function()
{
     if ( $(this).val() != '' )
     {
         $('#vlastname').val('');
         $('#vfirstname').val('');
     }
});


$('#CustomerIsNotInDatabase input').keyup(function()
{
      $('#customerIsInDatabase select').val('').change();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='CustomerIsNotInDatabase'>
    <input id='vlastname' name='ulastname' type='text' value=''></input>
    <input id='vfirstname' name='ufirstname' type='text' value=''></input>
</div>

<div id='customerIsInDatabase'>
<select>
    <option selected='true' value=''>Choose</option>
    <option value='Name1'>Name1</option>
    <option value='Name2'>Name2</option>
</select>
</div>

＆＃13;

Answer 2

$('#customerIsInDatabase select').on('change', function(){
    $('#CustomerIsNotInDatabase').find('input:text').val('');
});

$('#CustomerIsNotInDatabase input').on('keypress', function(){
    $('#customerIsInDatabase select').val('');
});

Fiddle

编辑（基于评论的解决方案更新了所选的＆＃39;属性）

$('#customerIsInDatabase select').on('change', function(){
    var selectedVal = $(this).val();
    setSelected(selectedVal);   
    $('#CustomerIsNotInDatabase').find('input:text').val('');
});

$('#CustomerIsNotInDatabase input').on('keypress', function(){
    $('#customerIsInDatabase select').val('');
    setSelected('');
});

function setSelected(selVal) {
    $("select option").attr("selected",false);
    $("select option[value='" + selVal +"']").attr("selected",true);
}

Updated Fiddle

单击SELECT选项，将text-INPUT元素的VALUE动态设置为默认值

2 个答案: