自動選択値<select multiple 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>のすべての要素を検索しようとしています。あなたはそれを持っていません。代わりに、<option value="terms-conditions">を含む<select id="attendee_information_fields">があります。

は、そのオプションを選択するには、使用する必要が $('select#attendee_information_fields option[value=terms-conditions]')

Answer 2

あなたの問題にはいくつかの問題があります。

1. あなたのjQueryのIDを持つ<select>要素（$('select#terms-conditions > option')）、あなたがしたいものを選択しています実際には、ネストした<option>要素を、一致する値で検索することです。
   1. <select>フィールド上の修正を聴く（私たちはをクリックして聞いて避けるようにしてください：あなたは私のソリューションは、以下の通りである

   ブール属性を設定する代わりに.prop()の.attr()を使用している（$('select option[value="terms-conditions"]')）

2. 入力要素のイベント）。これは、私たちが値属性配列に発見されただけのリターン要素にjQueryの.filter()メソッドを使用して、このコレクションをフィルタリング（$(this).find('option')で参照される）要素で見つかったすべての<option>要素
3. を通じて.change()方法
4. Go]を結合することによって行われます。配列には、選択したい値が含まれている必要があります。ネイティブJSで単純にArray.prototype.indexOfメソッドを使用して評価されます。インデックスの戻り値が0以上の場合、値は配列内にあることを意味します。あなたが見たいアレイは['become-a-cfp-camper', 'terms-conditions']になります。
5. <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>