自动选择值<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>