当“下拉选择”字段设置为某个值时，清除文本输入字段

Clear a text input field when a DropDown Selection field is set to a certain value?

本文关键字：字段 输入 文本 清除 设置 选择 下拉选择      更新时间：2023-09-26

基于下面的HTML选择表单字段，当选择字段设置为除Completed或Cancelled 之外的任何值时，我需要重置文本字段值

<select name="status" id="status" title="">
    <option label="Open" value="Open">Open</option>
    <option label="In Progress" value="In_Progress">In Progress</option>
    <option label="Future_Project" value="Future_Project">Future_Project</option>
    <option label="Cancelled" value="Cancelled">Cancelled</option>
    <option label="Completed" value="Completed" selected="selected">Completed</option>
</select>

我需要将值设置为空/无的文本输入如下。。。

<input autocomplete="off" type="text" id="date_completed_date" value="09/20/2014 06:15pm" size="11" maxlength="10" onblur="combo_date_completed.update();" onchange="combo_date_completed.update(); ">

我可以使用jQuery或常规JavaScript。如果有什么帮助我会很感激，我想这应该很简单吧？

工作解决方案：http://jsfiddle.net/bevanr01/7e2ubo85/4/

$( "#status" ).change(function() {
    if ((["Cancelled","Completed"].indexOf($(this).val()) == -1)){
         $('#date_completed_date').val('');   
    }
});

如果你想像下面提到的那样变得有趣，你可以添加今天的日期，这两个值都是选定的。

$( "#status" ).change(function() {
    if ((["Cancelled","Completed"].indexOf($(this).val()) == -1)){
         $('#date_completed_date').val('');   
    } else {
            $('#date_completed_date').val(new Date());   
    }
});

如果用户重新选择另一个选项，则保留日期是值得的，否则日期将保持空白。

var date = $('#date_completed_date').val();
$("select").on("change", function () {
    if ($(this).val().indexOf('ed') == -1) {
   $('#date_completed_date').val('');
}
    else { 
        $('#date_completed_date').val(date); 
    }
})

演示

http://jsfiddle.net/mrw9hor8/

尝试这个

    <form name="sample">
    <select name="status" id="status" title="" onchange="clearInput()">
        <option label="Open" value="Open">Open</option>
        <option label="In Progress" value="In_Progress">In Progress</option>
        <option label="Future_Project" value="Future_Project">Future_Project</option>
        <option label="Cancelled" value="Cancelled">Cancelled</option>
        <option label="Completed" value="Completed" selected="selected">Completed</option>
    </select>
<input autocomplete="off" type="text" id="date_completed_date" value="09/20/2014 06:15pm" size="11" maxlength="10" onblur="combo_date_completed.update();" onchange="combo_date_completed.update(); ">
</form>

在您的脚本中

function clearInput() {
   if(document.sample.status.value != "Completed" && document.sample.status.value != "Cancelled")
   {
     document.getElementById('date_completed_date').value='';
   }
}
相关文章：