选择更改时的 JS 更改表单操作不适用于 .trim()

Question

由于用户从<select></select> 下拉列表中选择了一个选项，我想要更改一个表单。

这是我的表格：

    <form role="form"  method="post" id="switch-customer-form" class="switch-customer-form">
        {% csrf_token %}
        <div class="form-group col-xs-12 floating-label-form-group controls">
            <select class="form-control customers-dropdown" id="customers-dropdown" name="form_customers">
                {% for c in customers %}
                    <option{% if customer == c %} selected="true"{% endif %}>{{ c }} - {{ c.id }}</option>
                {% endfor %}
            </select> 
        </div>
        <div class="form-group col-xs-12 floating-label-form-group controls">
            <input type="submit" value="View Calendar" class="btn btn-primary btn-sm">
        </div>


    </form>

这是我的（非工作）JS：

$("#customers-dropdown").change(function() {

    var action1 = "/ac/calendar/";
    var action2 = "/2014/12/";

    var customer = $(this).val();
    var customer_split = customer.split("-");
    var customer_id = customer_split[1].trim();

    var final_action = action1 + customer_id + action2;

    alert(final_action);

    $("#switch-customer-form").attr("action", final_action);

});

我遇到的问题是将.trim() 添加到customer_id 变量初始化中。由于某种原因，添加此功能时它不再更改表单的action。如果没有.trim()，它确实会正确更改操作，但是会有多余的空格导致链接无法指向相应的页面。

.trim() 中有什么东西导致了这个吗？有没有更理想的方法从该变量中删除空格？感谢您的帮助。

更新（为清楚起见）：

这是我唯一成功更改表单操作的 JS，尽管它仍然包含一个额外的空格：

$("#customers-dropdown").change(function() {

    var action1 = "/ac/calendar/";
    var action2 = "/2014/12/";

    var customer = $(this).val();
    var customer_split = customer.split("-");
    var customer_id = customer_split[1];

    var final_action = action1 + customer_id + action2;

    alert(final_action);

    $("#switch-customer-form").attr("action", final_action);

});

这是没有向<option> 标记添加值。这样做后，我遇到了同样的问题，它没有更新表单操作，只是发布到当前页面。

Answer 1

这样做不是更容易吗？ （使用id作为选择选项的值）

<form role="form"  method="post" id="switch-customer-form" class="switch-customer-form">
        {% csrf_token %}
        <div class="form-group col-xs-12 floating-label-form-group controls">
            <select class="form-control customers-dropdown" id="customers-dropdown" name="form_customers">
                {% for c in customers %}
                    <option{% if customer == c %} selected="true"{% endif %} value="{{c.id}}">{{ c }} - {{ c.id }}</option>
                {% endfor %}
            </select> 
        </div>
        <div class="form-group col-xs-12 floating-label-form-group controls">
            <input type="submit" value="View Calendar" class="btn btn-primary btn-sm">
        </div>


    </form>

$("#customers-dropdown").change(function() {

    var action1 = "/ac/calendar/";
    var action2 = "/2014/12/";

    var customer = this.value;

    var final_action = action1 + customer + action2;

    alert(final_action);

    $("#switch-customer-form").attr("action", final_action);

});

更新

这是没有向标签添加值。这样做后，我 遇到相同的问题，它不更新表单操作和 只需发布到当前页面。

您将被重定向到同一页面，因为尚未触发更改事件并且表单中没有任何操作。如果更改事件会被触发，动作就会改变并且会起作用。

您需要在表单中添加一个操作或添加 javascript 以将操作更改为在 DOM 准备好时标记为选中的选项。

例如，在 DOM 就绪时：

var changeAction = function(id) {
    var action1 = "/ac/calendar/";
    var action2 = "/2014/12/";    

    var final_action = action1 + id + action2;

    $("#switch-customer-form").attr("action", final_action);
};

changeAction($("#customers-dropdown").val());// On document ready, change action to selected item.
$("#customers-dropdown").change(function () {// On change event, change action as well
    changeAction(this.value);
});

fiddle