取消选择后无法再次选择选项 [英] Can't select option again after unselect
本文介绍了取消选择后无法再次选择选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个input(id = quickS)和一个select(id = lbSLI_L)元素，如下所示.
I have an input(id=quickS) and a select(id=lbSLI_L) element like below.
我的Jquery代码如:
My Jquery code like :
$(document).ready(function () {
$("#quickS").keyup(function () {
$("#lbSLI_L option:selected").attr('selected', false);
$("#lbSLI_L option:contains(" + $("#quickS").val() + ")").eq(0).attr('selected', 'selected');
});
});
当我在输入元素中输入1时，将选择包含1的选项文本.
Option text containing 1 will be selected when I type 1 in input element.
但是当我删除1并在输入元素中再次输入时，不会像第一次一样选择相同的选项.
But when I delete 1 and type it again in input element, the same option won't be selected like first time.
我在代码中犯了任何错误吗?
Did I make any mistake in my code?
$(document).ready(function () {
$("#quickS").keyup(function () {
$("#lbSLI_L option:selected").removeAttr('selected');
$("#lbSLI_L option:contains(" + $(this).val() + ")").eq(0).attr('selected', 'selected');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input name="quickS" type="text" id="quickS" style="width:163px;" />
<select size="6" name="lbSLI_L" multiple="multiple" id="lbSLI_L" style="height:90px;width:172px;">
<option value="O/L線路斷路">1. O/L線路斷路</option>
<option value="壓合凹陷皺褶">10. 壓合凹陷皺褶</option>
<option value="前製程基材破裂">100. 前製程基材破裂</option>
<option value="基材破裂(8E)">101. 基材破裂(8E)</option>
<option value="前製程線路變細">102. 前製程線路變細</option>
<option value="鑽孔不對位">11. 鑽孔不對位</option>
<option value="漏鑽孔、孔未貫穿">12. 漏鑽孔、孔未貫穿</option>
<option value="多鑽孔">13. 多鑽孔</option>
<option value="斷鑽報廢">14. 斷鑽報廢</option>
<option value="O/L線路缺口">17. O/L線路缺口</option>
<option value="O/L對位不良">18. O/L對位不良</option>
<option value="O/L外層短路">2. O/L外層短路</option>
<option value="O/L銅殘留">20. O/L銅殘留</option>
<option value="Pad破損">22. Pad破損</option>
<option value="線路刮撞傷">23. 線路刮撞傷</option>
<option value="修補O/L蝕刻不全">25. 修補O/L蝕刻不全</option>
<option value="修補線路刮撞傷">29. 修補線路刮撞傷</option>
<option value="基材破裂">3. 基材破裂</option>
<option value="修補顯影刮撞傷">30. 修補顯影刮撞傷</option>
<option value="顯影刮撞傷">32. 顯影刮撞傷</option>
<option value="O/L線路斷路(共同性)">33. O/L線路斷路(共同性)</option>
<option value="O/L外層短路(共同性)">34. O/L外層短路(共同性)</option>
<option value="O/L線路缺口(共同性)">35. O/L線路缺口(共同性)</option>
<option value="O/L銅殘留(共同性)">36. O/L銅殘留(共同性)</option>
<option value="孔內結瘤">37. 孔內結瘤</option>
<option value="顯影刮撞傷(集中區域)">38. 顯影刮撞傷(集中區域)</option>
<option value="修補O/L外層短路(共同性)">39. 修補O/L外層短路(共同性)</option>
<option value="AOS">4. AOS</option>
<option value="修補O/L銅殘留(共同性)">40. 修補O/L銅殘留(共同性)</option>
<option value="修補夾膜殘銅">41. 修補夾膜殘銅</option>
<option value="修補顯影刮撞傷(集中區域)">42. 修補顯影刮撞傷(集中區域)</option>
<option value="修補滲鍍">43. 修補滲鍍</option>
<option value="修補O/L外層短路">44. 修補O/L外層短路</option>
<option value="修補O/L銅殘留">45. 修補O/L銅殘留</option>
<option value="O/L線路變細">46. O/L線路變細</option>
<option value="結瘤(SHORT)">47. 結瘤(SHORT)</option>
<option value="乾膜浮(剝)離">48. 乾膜浮(剝)離</option>
<option value="線路分層">49. 線路分層</option>
<option value="凹陷">5. 凹陷</option>
<option value="內層紅筆報廢">50. 內層紅筆報廢</option>
<option value="PTH壓傷">51. PTH壓傷</option>
<option value="異物抗鍍">52. 異物抗鍍</option>
<option value="外層前刮傷">53. 外層前刮傷</option>
<option value="填孔不良">55. 填孔不良</option>
<option value="乾膜殘留">56. 乾膜殘留</option>
<option value="棕化不良">57. 棕化不良</option>
<option value="壓合氣泡">58. 壓合氣泡</option>
<option value="異物抗咬蝕">59. 異物抗咬蝕</option>
<option value="夾膜殘銅">6. 夾膜殘銅</option>
<option value="底銅抗咬蝕">60. 底銅抗咬蝕</option>
<option value="藥液殘留(72)">62. 藥液殘留(72)</option>
<option value="內層紅筆劃超出">63. 內層紅筆劃超出</option>
<option value="孔銅斜角">64. 孔銅斜角</option>
<option value="等高殘銅">66. 等高殘銅</option>
<option value="光點不見/破損">67. 光點不見/破損</option>
<option value="樹脂灌孔不良">68. 樹脂灌孔不良</option>
<option value="修補異物抗咬蝕">69. 修補異物抗咬蝕</option>
<option value="滲鍍">7. 滲鍍</option>
<option value="修補底銅抗咬蝕">70. 修補底銅抗咬蝕</option>
<option value="修補等高殘銅">71. 修補等高殘銅</option>
<option value="板面氧化污染(68)">72. 板面氧化污染(68)</option>
<option value="修補結瘤(SHORT)">73. 修補結瘤(SHORT)</option>
<option value="破孔(29)">74. 破孔(29)</option>
<option value="黑色異物">75. 黑色異物</option>
<option value="玻纖異常">76. 玻纖異常</option>
<option value="板面殘膠污染(68)">77. 板面殘膠污染(68)</option>
<option value="線路錯位(4D)">78. 線路錯位(4D)</option>
<option value="線路刮撞傷-剝離(89)">79. 線路刮撞傷-剝離(89)</option>
<option value="O/L蝕刻不全">8. O/L蝕刻不全</option>
<option value="其他.">80. 其他.</option>
<option value="其他.">81. 其他.</option>
<option value="其他">82. 其他</option>
<option value="孔位偏移">9. 孔位偏移</option>
<option value="前製程基材破裂">98. 前製程基材破裂</option>
<option value="切片">99. 切片</option>
<option value="未定義劃記報廢">UN. 未定義劃記報廢</option>
</select>
推荐答案
尝试删除选定的属性，如下所示，并设置匹配选项的属性，并使用$(this)读取输入框的值，而不是通过id再次选择它因为这样可以提高性能
Try with remove selected property as shown below and set the property of matching option and use $(this) to read value of input box instead of selecting it again by id as this will improve the performance
$(document).ready(function () {
$("#quickS").keyup(function () {
$("#lbSLI_L option:selected").removeProp('selected');
$("#lbSLI_L option:contains(" + $(this).val() + ")").eq(0).prop('selected', 'selected');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input name="quickS" type="text" id="quickS" style="width:163px;" />
<select size="6" name="lbSLI_L" multiple="multiple" id="lbSLI_L" style="height:90px;width:172px;">
<option value="O/L線路斷路">1. O/L線路斷路</option>
<option value="壓合凹陷皺褶">10. 壓合凹陷皺褶</option>
<option value="前製程基材破裂">100. 前製程基材破裂</option>
<option value="基材破裂(8E)">101. 基材破裂(8E)</option>
<option value="前製程線路變細">102. 前製程線路變細</option>
<option value="鑽孔不對位">11. 鑽孔不對位</option>
<option value="漏鑽孔、孔未貫穿">12. 漏鑽孔、孔未貫穿</option>
<option value="多鑽孔">13. 多鑽孔</option>
<option value="斷鑽報廢">14. 斷鑽報廢</option>
<option value="O/L線路缺口">17. O/L線路缺口</option>
<option value="O/L對位不良">18. O/L對位不良</option>
<option value="O/L外層短路">2. O/L外層短路</option>
<option value="O/L銅殘留">20. O/L銅殘留</option>
<option value="Pad破損">22. Pad破損</option>
<option value="線路刮撞傷">23. 線路刮撞傷</option>
<option value="修補O/L蝕刻不全">25. 修補O/L蝕刻不全</option>
<option value="修補線路刮撞傷">29. 修補線路刮撞傷</option>
<option value="基材破裂">3. 基材破裂</option>
<option value="修補顯影刮撞傷">30. 修補顯影刮撞傷</option>
<option value="顯影刮撞傷">32. 顯影刮撞傷</option>
<option value="O/L線路斷路(共同性)">33. O/L線路斷路(共同性)</option>
<option value="O/L外層短路(共同性)">34. O/L外層短路(共同性)</option>
<option value="O/L線路缺口(共同性)">35. O/L線路缺口(共同性)</option>
<option value="O/L銅殘留(共同性)">36. O/L銅殘留(共同性)</option>
<option value="孔內結瘤">37. 孔內結瘤</option>
<option value="顯影刮撞傷(集中區域)">38. 顯影刮撞傷(集中區域)</option>
<option value="修補O/L外層短路(共同性)">39. 修補O/L外層短路(共同性)</option>
<option value="AOS">4. AOS</option>
<option value="修補O/L銅殘留(共同性)">40. 修補O/L銅殘留(共同性)</option>
<option value="修補夾膜殘銅">41. 修補夾膜殘銅</option>
<option value="修補顯影刮撞傷(集中區域)">42. 修補顯影刮撞傷(集中區域)</option>
<option value="修補滲鍍">43. 修補滲鍍</option>
<option value="修補O/L外層短路">44. 修補O/L外層短路</option>
<option value="修補O/L銅殘留">45. 修補O/L銅殘留</option>
<option value="O/L線路變細">46. O/L線路變細</option>
<option value="結瘤(SHORT)">47. 結瘤(SHORT)</option>
<option value="乾膜浮(剝)離">48. 乾膜浮(剝)離</option>
<option value="線路分層">49. 線路分層</option>
<option value="凹陷">5. 凹陷</option>
<option value="內層紅筆報廢">50. 內層紅筆報廢</option>
<option value="PTH壓傷">51. PTH壓傷</option>
<option value="異物抗鍍">52. 異物抗鍍</option>
<option value="外層前刮傷">53. 外層前刮傷</option>
<option value="填孔不良">55. 填孔不良</option>
<option value="乾膜殘留">56. 乾膜殘留</option>
<option value="棕化不良">57. 棕化不良</option>
<option value="壓合氣泡">58. 壓合氣泡</option>
<option value="異物抗咬蝕">59. 異物抗咬蝕</option>
<option value="夾膜殘銅">6. 夾膜殘銅</option>
<option value="底銅抗咬蝕">60. 底銅抗咬蝕</option>
<option value="藥液殘留(72)">62. 藥液殘留(72)</option>
<option value="內層紅筆劃超出">63. 內層紅筆劃超出</option>
<option value="孔銅斜角">64. 孔銅斜角</option>
<option value="等高殘銅">66. 等高殘銅</option>
<option value="光點不見/破損">67. 光點不見/破損</option>
<option value="樹脂灌孔不良">68. 樹脂灌孔不良</option>
<option value="修補異物抗咬蝕">69. 修補異物抗咬蝕</option>
<option value="滲鍍">7. 滲鍍</option>
<option value="修補底銅抗咬蝕">70. 修補底銅抗咬蝕</option>
<option value="修補等高殘銅">71. 修補等高殘銅</option>
<option value="板面氧化污染(68)">72. 板面氧化污染(68)</option>
<option value="修補結瘤(SHORT)">73. 修補結瘤(SHORT)</option>
<option value="破孔(29)">74. 破孔(29)</option>
<option value="黑色異物">75. 黑色異物</option>
<option value="玻纖異常">76. 玻纖異常</option>
<option value="板面殘膠污染(68)">77. 板面殘膠污染(68)</option>
<option value="線路錯位(4D)">78. 線路錯位(4D)</option>
<option value="線路刮撞傷-剝離(89)">79. 線路刮撞傷-剝離(89)</option>
<option value="O/L蝕刻不全">8. O/L蝕刻不全</option>
<option value="其他.">80. 其他.</option>
<option value="其他.">81. 其他.</option>
<option value="其他">82. 其他</option>
<option value="孔位偏移">9. 孔位偏移</option>
<option value="前製程基材破裂">98. 前製程基材破裂</option>
<option value="切片">99. 切片</option>
<option value="未定義劃記報廢">UN. 未定義劃記報廢</option>
</select>
这篇关于取消选择后无法再次选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
