I have looked endlessly on here and everywhere else for a while, and I cannot figure out why my Select2 dropdown boxes aren’t changing the value they display after I click it out of the dropdown.
I am trying to style the woocommerce product selection boxes using Select2 – I have them all styled, but now they don’t seem to actually work.
How I am initializing my two boxes:
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#current-rank").select2({
allowClear: true,
multiple: false,
width: 150
});
$("#desired-rank").select2({
allowClear: true,
multiple: false,
width: 150
});
});
</script>
HTML of the product page relevant to the dropdown -WITH SELECT2 ENABLED-(so yes all my options have an ID that Select2 should be able to use…)
<td class="value">
<select id="current-rank" name="attribute_current-rank" data-attribute_name="attribute_current-rank" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
<option id="select-a-rank" selected="selected" value="select-a-rank">Select a Rank</option> <option id="rank-2" value="rank-2">Rank 2</option> <option id="rank-3" value="rank-3">Rank 3</option> <option id="rank-4" value="rank-4">Rank 4</option> <option id="rank-5" value="rank-5">Rank 5</option> <option id="rank-6" value="rank-6">Rank 6</option> <option id="rank-7" value="rank-7">Rank 7</option> <option id="rank-8" value="rank-8">Rank 8</option> <option id="rank-9" value="rank-9">Rank 9</option> <option id="rank-10" value="rank-10">Rank 10</option> <option id="rank-11" value="rank-11">Rank 11</option> <option id="rank-12" value="rank-12">Rank 12</option> <option id="rank-13" value="rank-13">Rank 13</option> <option id="rank-14" value="rank-14">Rank 14</option> <option id="rank-15" value="rank-15">Rank 15</option> <option id="rank-16" value="rank-16">Rank 16</option> <option id="rank-17" value="rank-17">Rank 17</option> <option id="rank-18" value="rank-18">Rank 18</option> <option id="rank-19" value="rank-19">Rank 19</option> <option id="rank-20" value="rank-20">Rank 20</option> <option id="rank-21" value="rank-21">Rank 21</option> <option id="rank-22" value="rank-22">Rank 22</option> <option id="rank-23" value="rank-23">Rank 23</option> <option id="rank-24" value="rank-24">Rank 24</option> <option id="rank-25" value="rank-25">Rank 25</option> <option id="rank-26" value="rank-26">Rank 26</option> <option id="rank-27" value="rank-27">Rank 27</option> <option id="rank-28" value="rank-28">Rank 28</option> <option id="rank-29" value="rank-29">Rank 29</option> <option id="rank-30" value="rank-30">Rank 30</option> <option id="rank-31" value="rank-31">Rank 31</option> <option id="rank-32" value="rank-32">Rank 32</option> <option id="rank-33" value="rank-33">Rank 33</option> <option id="rank-34" value="rank-34">Rank 34</option> <option id="rank-35" value="rank-35">Rank 35</option> <option id="rank-36" value="rank-36">Rank 36</option> <option id="rank-37" value="rank-37">Rank 37</option> <option id="rank-38" value="rank-38">Rank 38</option> <option id="rank-39" value="rank-39">Rank 39</option> <option id="rank-40" value="rank-40">Rank 40</option> <option id="rank-41" value="rank-41">Rank 41</option> <option id="rank-42" value="rank-42">Rank 42</option> <option id="rank-43" value="rank-43">Rank 43</option> <option id="rank-44" value="rank-44">Rank 44</option> <option id="rank-45" value="rank-45">Rank 45</option> <option id="rank-46" value="rank-46">Rank 46</option> <option id="rank-47" value="rank-47">Rank 47</option> <option id="rank-48" value="rank-48">Rank 48</option> <option id="rank-49" value="rank-49">Rank 49</option> <option id="rank-50" value="rank-50">Rank 50</option>
</select>
<span class="select2 select2-container select2-container--default select2-container--below" dir="ltr" style="width: 150px;">
<span class="selection">
<span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-current-rank-container">
<span class="select2-selection__rendered" id="select2-current-rank-container" title="Select a Rank">
<span class="select2-selection__clear">Ã</span>Select a Rank
</span>
<span class="select2-selection__arrow" role="presentation">
<b role="presentation"></b>
</span>
</span>
</span>
<span class="dropdown-wrapper" aria-hidden="true"></span>
</span>
</td>
HTML of the product page SELECT2 SCRIPT DISABLED
<td class="value"><select id="current-rank" name="attribute_current-rank" data-attribute_name="attribute_current-rank">
<option id="select-a-rank" selected="selected" value="select-a-rank">Select a Rank</option>
<option id="rank-2" value="rank-2" class="attached enabled">Rank 2</option>
<option id="rank-3" value="rank-3" class="attached enabled">Rank 3</option>
<option id="rank-4" value="rank-4" class="attached enabled">Rank 4</option>
<option id="rank-5" value="rank-5" class="attached enabled">Rank 5</option>
<option id="rank-6" value="rank-6" class="attached enabled">Rank 6</option>
<option id="rank-7" value="rank-7" class="attached enabled">Rank 7</option>
<option id="rank-8" value="rank-8" class="attached enabled">Rank 8</option>
<option id="rank-9" value="rank-9" class="attached enabled">Rank 9</option>
<option id="rank-10" value="rank-10" class="attached enabled">Rank 10</option>
<option id="rank-11" value="rank-11" class="attached enabled">Rank 11</option>
<option id="rank-12" value="rank-12" class="attached enabled">Rank 12</option>
<option id="rank-13" value="rank-13" class="attached enabled">Rank 13</option>
<option id="rank-14" value="rank-14" class="attached enabled">Rank 14</option>
<option id="rank-15" value="rank-15" class="attached enabled">Rank 15</option>
<option id="rank-16" value="rank-16" class="attached enabled">Rank 16</option>
<option id="rank-17" value="rank-17" class="attached enabled">Rank 17</option>
<option id="rank-18" value="rank-18" class="attached enabled">Rank 18</option>
<option id="rank-19" value="rank-19" class="attached enabled">Rank 19</option>
<option id="rank-20" value="rank-20" class="attached enabled">Rank 20</option>
<option id="rank-21" value="rank-21" class="attached enabled">Rank 21</option>
<option id="rank-22" value="rank-22" class="attached enabled">Rank 22</option>
<option id="rank-23" value="rank-23" class="attached enabled">Rank 23</option>
<option id="rank-24" value="rank-24" class="attached enabled">Rank 24</option>
<option id="rank-25" value="rank-25" class="attached enabled">Rank 25</option>
<option id="rank-26" value="rank-26" class="attached enabled">Rank 26</option>
<option id="rank-27" value="rank-27" class="attached enabled">Rank 27</option>
<option id="rank-28" value="rank-28" class="attached enabled">Rank 28</option>
<option id="rank-29" value="rank-29" class="attached enabled">Rank 29</option>
<option id="rank-30" value="rank-30" class="attached enabled">Rank 30</option>
<option id="rank-31" value="rank-31" class="attached enabled">Rank 31</option>
<option id="rank-32" value="rank-32" class="attached enabled">Rank 32</option>
<option id="rank-33" value="rank-33" class="attached enabled">Rank 33</option>
<option id="rank-34" value="rank-34" class="attached enabled">Rank 34</option>
<option id="rank-35" value="rank-35" class="attached enabled">Rank 35</option>
<option id="rank-36" value="rank-36" class="attached enabled">Rank 36</option>
<option id="rank-37" value="rank-37" class="attached enabled">Rank 37</option>
<option id="rank-38" value="rank-38" class="attached enabled">Rank 38</option>
<option id="rank-39" value="rank-39" class="attached enabled">Rank 39</option>
<option id="rank-40" value="rank-40" class="attached enabled">Rank 40</option>
<option id="rank-41" value="rank-41" class="attached enabled">Rank 41</option>
<option id="rank-42" value="rank-42" class="attached enabled">Rank 42</option>
<option id="rank-43" value="rank-43" class="attached enabled">Rank 43</option>
<option id="rank-44" value="rank-44" class="attached enabled">Rank 44</option>
<option id="rank-45" value="rank-45" class="attached enabled">Rank 45</option>
<option id="rank-46" value="rank-46" class="attached enabled">Rank 46</option>
<option id="rank-47" value="rank-47" class="attached enabled">Rank 47</option>
<option id="rank-48" value="rank-48" class="attached enabled">Rank 48</option>
<option id="rank-49" value="rank-49" class="attached enabled">Rank 49</option>
<option id="rank-50" value="rank-50" class="attached enabled">Rank 50</option>
</select> </td>
I have no clue why this isn’t working, the main possible issue I have found is that Select2 has no ID to call an item by, but I have made sure an ID gets generated by WooCommerce when loading the page.
I don’t think Select2:select is firing but not sure why, as “selected” isn’t changed on an item click.
