Javascript 通过单击“选择选项”，将文本输入元素的值动态设置为默认值

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

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”：如果用户向输入字段添加文本，如何将该值重置为具有值的第一个选项？

1。关于第一个问题

如果用户正在选择选择字段的选项值“Name1”或选项值“Name2”，则必须重置输入字段值

您可以使用更改事件处理用户更改，并使用val重置输入：

二,。关于第二个问题

如果选择了选项值“Name1”或选项值“Name2”：如果用户向输入字段添加文本，如何将此值重置为具有值的第一个选项

当任何键出现在输入字段中时，您可以使用keyup事件检测用户操作：

希望这有帮助

完整示例：

$'customerIsInDatabase select'.changefunction { 如果$this.val！= { $'vlastname'.val； $'vfirstname'.val； } }; $'CustomerIsNotInDatabase input'.keyupfunction { $'customerIsInDatabase select'.val.change； }; 选择 名称1 姓名2 基于注释编辑解决方案以更新“选定”属性

$('#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);
}

---

设置一个文本输入元素值，只需执行elem.value=；回答很好，但是如果选择了选项choose？@ZakariaAcharki我没有对choose进行任何检查，因为只有当选择从Name1或Name2切换到OP的要求时，才能选择它。当键入文本时，它将转到choose&当选择除choose之外的任何内容时，文本将被清除。当选项为“选择”时，您将无法再次选择；尝试切换到同一选定选项时不会触发更改事件。这意味着不会出现这样的情况：当用户选择“选择”选项时，文本将被清除。试试小提琴。@ZakariaAcharki编辑了答案，这样“selected”属性将位于正确的选项上，尽管这超出了OP问题的范围

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

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

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

$('#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);
}