Selecting an option and posting its value, in the result have that option automatically selected

Question

I got a select element which posts some data to a php script using ajax.

My html looks like this:

<select id="productoptiekeuze" class="productchoice" required="">
   <option value="">Maak uw keuze</option>
   <option value="0" data-src="45">€ 45&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp; Formaat: 60 cm&nbsp;&nbsp; Kleur: century oak&nbsp;&nbsp; Materiaal: kunststof&nbsp;&nbsp; </option>
   <option value="1" data-src="45">€ 45&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp; Formaat: 60 cm&nbsp;&nbsp; Kleur: century oak&nbsp;&nbsp; Materiaal: kunststof&nbsp;&nbsp; </option>
   <option value="2" data-src="55">€ 55&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp; Formaat: 80 cm&nbsp;&nbsp; Kleur: dark oak&nbsp;&nbsp; Materiaal: kunststof&nbsp;&nbsp; </option>
   <option value="3" data-src="55">€ 55&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp; Formaat: 80 cm&nbsp;&nbsp; Kleur: grey&nbsp;&nbsp; Materiaal: graniet&nbsp;&nbsp; </option>
   <option value="4" data-src="55">€ 55&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp; Formaat: 80 cm&nbsp;&nbsp; Kleur: grey&nbsp;&nbsp; Materiaal: graniet&nbsp;&nbsp; </option>
   <option value="5" data-src="95">€ 95&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp; Formaat: 120 cm&nbsp;&nbsp; Kleur: century oak&nbsp;&nbsp; Materiaal: eik&nbsp;&nbsp; </option>
   <optgroup label=""></optgroup>
</select>

The last optgroup is to dirty fix an issue in IOS.

This is my ajax:

tpj('#productinfo').on('change', '#productoptiekeuze', function() {
  var $aangepasteprijs = tpj('#productoptiekeuze').find('option:selected').attr('data-src'),
  $huidigeprijs = tpj('#price').text(),
  $oudeprijs = tpj('#oldprice').text(),
  $alias = tpj('input[name="alias"]').val(),
  $quantity = tpj('input[name="quantity"]').val(),
  $value = tpj('#productoptiekeuze').find('option:selected').val(),
  url = 'includes/prodoptie.php';

  var posting = tpj.post( url, {
    aangepasteprijs: $aangepasteprijs,
    huidigeprijs: $huidigeprijs,
    oudeprijs: $oudeprijs,
    alias: $alias,
    quantity: $quantity,
    value: $value
  } );

  posting.done(function( data ) {
    tpj( "#productinfo" ).empty().append( data );
    tpj('option:contains(' + $value + ')').attr('selected', true);
  });
});

I post the value of the selected option to my script, and want to automatically have that option selected in the result. But I get real weird behaviour, sometimes it works, but most of the times I get no response or something entirely different from what I clicked.

Why could that be?

You can see it functioning here (It's the dropdown above the PLAATS IN WINKELWAGEN button)

My PHP script that is returned has the exact same list and values.

Answer 1

i think that your posting done does not find your option. You should make two divs and only update the content that is needed to update, so your select is not effect by re-adding it.

Otherwise you could try yor posting.done like this:

posting.done(function( data ) {
    tpj( "#productinfo" ).empty().append( data );
    tpj('option[value="'+$value+'"]').prop('selected', true);
});