translating words using jQuery and Squarespace

Question

I'm trying to finalise the design of a website using Squarespace. I would like to translate two words from US english to UK english (colour instead of color), but somehow I'm stuck.

Here's the link to the page: https://www.maisonmariet.fr/collection/mm01

Using jQuery, I've been able to modify one word out of three:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
 $(document).ready(function() {
   $(".variant-option-title").text("colour:");
 });
 </script>

Now, when it comes to the "data-variant-option-name" and the "option value", I can't modify anything although trust me I've probably spent 4 hours trying. I hope you guys will be able to understand my issue and to help me fix it...

Please let me know if you need more information. Thanks in advance!

Answer 1

I hope this may helps you

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
 $(document).ready(function() {
   $(".variant-option-title").text("colour:");
$('.list').attr('data-variant-option-name', 'colour'); 

$(".list option[value='']").text('Select Colour');

 });
 </script>
<div class="variant-option" id="yui_3_17_2_1_1504692126682_213">
    <div class="variant-option-title">color:</div>
    <div class="variant-select-wrapper" data-text="Select Color" id="yui_3_17_2_1_1504692126682_349">
      <select class="list" data-variant-option-name="Color" id="yui_3_17_2_1_1504692126682_215">
        <option value="">Select Color</option>
        <option value="White">White</option><option value="Grey">Grey</option><option value="Ivory">Ivory</option>
      </select>
    </div>
    </div>

if you want to select option value as a loop,try the below code

 $("select option").filter(function() {

    var val = $(this).text() ; 
   console.log(val);

})

If you want to change every values of drop down ,you can use this code

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
 $(document).ready(function() {
 $(".variant-option-title").text("colour:");
         $("select option").each(function() {

           var val = $(this).val() ;
           var txt = $(this).text() ; 
           var text = convertustouk(txt);
           var vals = convertustouk(val);
        $("select option[value='"+val+"']").text(text);
       $("select option[value='"+val+"']").val(vals);
        })
         });
        function convertustouk(val){
        var res = val;
        if(val =='Select Color')
        {
         res = 'Select Colour';
        }
        if(val =='Grey')
        {
         res = 'Gray';
        }
        return res;
        }
</script>
<div class="variant-option" id="yui_3_17_2_1_1504692126682_213">
    <div class="variant-option-title">color:</div>
    <div class="variant-select-wrapper" data-text="Select Color" id="yui_3_17_2_1_1504692126682_349">
      <select class="list" data-variant-option-name="Color" id="yui_3_17_2_1_1504692126682_215">
        <option value="">Select Color</option>
        <option value="White">White</option><option value="Grey">Grey</option><option value="Ivory">Ivory</option>
      </select>
    </div>
    </div>