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); 

}); 

UPDATE

这是不添加值标记。一旦这样做，我 遇到同样的问题，它不会更新表单操作和 只是发布到当前页面。

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

当DOM准备就绪时，您需要向表单添加一个动作或添加javascript以将操作更改为标记为选中的选项。

例如，在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