Question

我想为以下内容创建一个函数：

<select name="journey_type">
<option value="1">One Way</option>
<option value="2">Return</option>
</select>

<div id="return_datetime_div" style="display:none;">
<input id="Enquiry_return_datetime" type="text">
</div>

当用户选择“返回”时，将显示return_datetime_div。如果用户然后选择“One Way”，则return_datetime_div将被隐藏（此功能正在运行）：

$("select[name='journey_type']").change(function()
{
    if($($(this)).val() == "2")
    {
        $("#return_datetime_div").slideDown();
    }
    else
    {
        $("#return_datetime_div").slideUp();
    }
}
});

现在我想针对以下场景扩展它：

用户选择“返回”
用户在#Enquiry_return_datetime
用户然后选择“One Way”
应显示“确认”弹出窗口，通知用户旅程类型的更改
如果用户接受，则应删除#Enquiry_return_datetime中的文本并按正常情况隐藏div
如果用户不接受，则文本仍然存在，且travel_type选项不应更改且div不会隐藏

Answer 1

使用带有id的选择器比检查具有特定名称属性的所有选择要快得多。我还简化了你的“this”语法。

    $('select#journey_type').change(function() {
        if(this.val() == '2') {
            $('#return_datetime_div').slideDown();
        } else {
            $('#return_datetime_div').slideUp();
        }
    }

其次，如果用户在“返回”之后选择“单向”，我只是在视觉上显而易见而不是用警告来窃听它们。我也不会删除该值，只是不要在服务器端处理它，更容易。

如果您认为您的用户会以某种方式误解，请执行一些非常简单的可用性测试，只需要求任何非技术人员执行任务并让他们在执行任务时发表评论。

jQuery下拉更改功能

1 个答案: