自動選擇值<select multiple =「multiple」>

Question

我是新來的編碼，但試圖幫助自己。如果任何人可以建議會很好。

我正在使用創建下面的表單的插件。我通過檢查瀏覽器上的元素來檢查這一點。

<select multiple="multiple" name="attendee_information_fields[]" id="attendee_information_fields" class="event-manager-multiselect" data-no_results_text="No results match" attribute="" data-multiple_text="Select Some Options" style="display: none;"> 
     <option value="full-name">Full name</option> 
     <option value="email-address">Email address</option> 
     <option value="phone">Phone</option> 
     <option value="location">Location</option> 
     <option value="gender">Gender</option> 
     <option value="age">Age</option> 
     <option value="terms-conditions">Terms &amp; Conditions</option> 
     <option value="become-a-cfp-camper">Become a CFP Camper</option> 
</select> 

這是必填字段。我想要的是選項值應該自動選擇值terms-conditions和become-a-cfp-camper。對於這一點，我寫下面的代碼在我的主題的functions.php文件：

if($_POST['attendee_information_fields']) { echo " 
<script type='text/javascript'> 
$('#attendee_information_fields').click(function() { 
    $('select#terms-conditions > option').attr('selected', 'selected'); 
    $('select#become-a-cfp-camper > option').attr('selected', 'selected'); 
}); 
</script>"; 
} 

好像沒有什麼改變，我無言以對。任何人都可以幫助我如何實現這一目標？非常感謝。

Answer 1

$('select#terms-conditions > option')正在嘗試查找<select id="terms-conditions">中的所有<option>元素。你沒有那個;相反，你有一個<select id="attendee_information_fields">其中包含一個<option value="terms-conditions">。

選擇該選項，你需要使用$('select#attendee_information_fields option[value=terms-conditions]')

Answer 2

有幾個問題，您的問題：

1. 你jQuery是選擇具有ID的<select>元素（$('select#terms-conditions > option')），當你想什麼do實際上是用匹配的值來搜索嵌套的<option>元素，例如（$('select option[value="terms-conditions"]')）
2. 您正在使用的.attr()代替.prop()設定布爾屬性

我的解決方案如下：

1. 聽的<select>場的修改（我們儘量避免聽點擊輸入元素上的事件）。這是通過綁定.change()方法
2. 經歷中的元素（由$(this).find('option')參考）發現
3. 所有<option>元素，我們使用jQuery的.filter()方法只返回其值屬性的陣列中找到的元素篩選此集合完成。該數組應該包含您有興趣選擇的值：在本機JS中使用簡單的Array.prototype.indexOf方法進行評估：當索引返回值爲0或更大時，表示該值在您的數組中。你想看的陣列將是['become-a-cfp-camper', 'terms-conditions']。
4. 要篩選出的<option>元素，我們只需使用.prop('selected', true)來編程選擇它們。

$(function() { 
 
    $('#attendee_information_fields').change(function() { 
 
    $(this).find('option').filter(function() { 
 
     return ['become-a-cfp-camper', 'terms-conditions'].indexOf($(this).val()) > -1; 
 
    }).prop('selected', true); 
 
    }); 
 
});

select { 
 
    height: 200px; /* Just to have a better view */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select multiple name="attendee_information_fields[]" id="attendee_information_fields" class="event-manager-multiselect" data-no_results_text="No results match" attribute="" data-multiple_text="Select Some Options"> 
 
     <option value="full-name">Full name</option> 
 
     <option value="email-address">Email address</option> 
 
     <option value="phone">Phone</option> 
 
     <option value="location">Location</option> 
 
     <option value="gender">Gender</option> 
 
     <option value="age">Age</option> 
 
     <option value="terms-conditions">Terms &amp; Conditions</option> 
 
     <option value="become-a-cfp-camper">Become a CFP Camper</option> 
 
</select>