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