我對以下代碼有一點問題：
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var val = $(this).attr("value");
if(val){
$(".place").not("." val).hide();
$("." val).show();
} else{
$(".place").hide();
}
});
}).change();
});
</script>
我想修改代碼，因為其中有一個包含空格的值，所以它不適用于這個。不起作用的值中有 2 個空格：“Garantie Jeunes (Antibes)”（這是確切的名稱）。其他值沒有空格。
<select tabindex="" id="Antenne" name="Antenne" class="fusion-form-input" data-holds-private-data="false">
<option value="Antibes">Antibes</option>
<option value="Biot">Biot</option>
<option value="Chateauneuf-Grasse">Chateauneuf-Grasse</option>
<option value="Garantie Jeunes (Antibes)">Garantie Jeunes (Antibes)</option>
<option value="Valbonne">Valbonne</option><option value="Vallauris">Vallauris</option>
<option value="Villeneuve-Loubet">Villeneuve-Loubet</option></select>
uj5u.com熱心網友回復：
正如您發現 class 屬性中的空格意味著它被解釋為多個單獨的類而不是單個類，因此您不能通過它進行選擇。
要解決此問題，您可以使用data目標元素上的屬性以及filter()檢索它們，如下所示：
jQuery($ => {
let $places = $('.place');
$("select").on('change', function() {
let val = $(this).val();
$places.hide().filter(function() {
return $(this).data('loc') === val;
}).show();
}).change();
});.place { display: none; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select tabindex="" id="Antenne" name="Antenne" class="fusion-form-input" data-holds-private-data="false">
<option value="Antibes">Antibes</option>
<option value="Biot">Biot</option>
<option value="Chateauneuf-Grasse">Chateauneuf-Grasse</option>
<option value="Garantie Jeunes (Antibes)">Garantie Jeunes (Antibes)</option>
<option value="Valbonne">Valbonne</option>
<option value="Vallauris">Vallauris</option>
<option value="Villeneuve-Loubet">Villeneuve-Loubet</option>
</select>
<div data-loc="Antibes" class="place">Antibes</div>
<div data-loc="Biot" class="place">Biot</div>
<div data-loc="Chateauneuf-Grasse" class="place">Chateauneuf-Grasse</div>
<div data-loc="Garantie Jeunes (Antibes)" class="place">Garantie Jeunes (Antibes)</div>
<div data-loc="Valbonne" class="place">Valbonne</div>
<div data-loc="Vallauris" class="place">Vallauris</div>
<div data-loc="Villeneuve-Loubet" class="place">Villeneuve-Loubet</div>請注意在上面的示例中使用 jQuery 3.6.0，這是本答案的最新版本。1.12.4 已經過時，需要更新。
另外，請注意，您可以直接檢索selectusing的選定值val()，而無需遍歷所有option:selected元素。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/406161.html
標籤：
上一篇：單擊時在元素中切換 /-