JQuery update select option

Need a little help on this one. I am trying to write jQuery code to change the selection of a select dropdown. Following the excellent advice on here, I am using .val(). However, this doesn’t remove the selected attribute, so I am also doing that.

The part where I am stuck is, I want to add the selected attribute to the new option, but the value of the new option (which is stored in the PHP value $option) has double quotation marks in it.

var shopDropdown = $(".buy__option-select__select", 
                   $('iframe')[0].contentWindow.document);
var initialSelection = $(".buy__option-select__select > option[selected]",
                       $('iframe')[0].contentWindow.document);
initialSelection.attr('selected',false); 
$(".buy__option-select__select", 
   $('iframe')[0].contentWindow.document).val('<?php echo $option ?>');
$('.buy__option-select__select > option[value="<?php echo addslashes($option) ?>"]', 
   $('iframe')[0].contentWindow.document).attr('selected',true);
shopDropdown.trigger('change');

Thanks!

Answer

AFAICT you are just trying to select one of the options in your select. You need to use .prop() to do that reliably. There is a note about this in the docs. They are writing about the checked attribute, but a note below says the same applies to selected:

Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does …. The same is true for other dynamic attributes, such as selected and value.

So once we are using the right method, the only problem to worry about is that pesky quote. We can solve that by carefully arranging double and single quotes.

Working (simplified) JSFidddle

HTML

<form>
    <select name="foo" class="buy__option-select__select">
        <option value=''>Please Choose</option>
        <option value='1'>One</option>
        <option value='two-with-"-quote'>Two</option>
        <option value='3' selected>Three</option>
    </select>
</form>

Javascript

$(document).ready(function () {

    var $select = $('.buy__option-select__select'),
    
        // Now specify the value of the option we want to select.  This
        // obviously must exactly match one of the listed value="x" values
        // above.  Also note that as it includes a double quote, we need
        // to surround it with single quotes.
        // 
        // You would use this PHP like this:
        // var target='<?php echo $option; ?>'
        // For demonstration we use some plain text:
        target = 'two-with-"-quote';    
        
    // Now just carefully arrange our quotes so that we have single quotes
    // surrounding our option:
    $("[value='" + target + "']", $select).prop('selected', true);
});