JS、JQuery選擇器 選擇內容前後帶空格

文章目錄

• JS、JQuery選擇器 選擇內容前後帶空格
• 問題產生背景
• 今天碰到了一個`不合理`的需求（不服來辯。。）
• 要求儲存的編碼（一個欄位，類似於班級）前後可以有空格。。。
• 需求嘛，來了就只能做咯。
• 產生問題
• 在修改的時候，突然碰到一個問題。
• 在這個欄位作為下拉框時，設定預設值的時候，因為`option`中的`value`前後帶有`空格`字元，所以在用選擇器，選擇的時候，竟然選不上。。如下：
• 解決問題
• 這就比較尷尬了。在經過反覆的推敲後。終於找到了解決方法。如下：
• 在選擇條件兩邊加上`'`，就可以了。
• 分析原因
• 目前覺得，原因就是在編譯的時候，可能自動去掉了空格，但是加上`'`後，編譯器必須把他看成一個整體，所以，就不會忽略`空格`了。

問題產生背景

今天碰到了一個不合理的需求（不服來辯。。）

要求儲存的編碼（一個欄位，類似於班級）前後可以有空格。。。

需求嘛，來了就只能做咯。

產生問題

在修改的時候，突然碰到一個問題。

在這個欄位作為下拉框時，設定預設值的時候，因為option中的value前後帶有空格字元，所以在用選擇器，選擇的時候，竟然選不上。。如下：

let grade = //後端返回的值
$("#gradeCode_select").find("option[value="+grade+"]").attr("selected","selected");
//編譯後，應該是，例如grade="   2222"
$("#gradeCode_select").find("option[value=   2222]").attr("selected","selected"
 
);

解決問題

這就比較尷尬了。在經過反覆的推敲後。終於找到了解決方法。如下：

let grade = //後端返回的值
$("#gradeCode_select").find("option[value='"+grade+"']").attr("selected","selected");
//編譯後，應該是，例如grade="   2222"
$("#gradeCode_select").find("option[value='   2222']").attr("selected","selected");

在選擇條件兩邊加上'，就可以了。

分析原因

目前覺得，原因就是在編譯的時候，可能自動去掉了空格，但是加上'後，編譯器必須把他看成一個整體，所以，就不會忽略空格了。