javascript - 选择一个选项并发布其值，结果会自动选择该选项

Question

我有一个 select 元素，它使用 ajax 将一些数据发送到 php 脚本。

我的 html 看起来像这样:

<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>

最后一个选项组是修复 IOS 中的问题。

这是我的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);
  });
});

我将所选选项的值发布到我的脚本中，并希望在结果中自动选择该选项。但我得到了真正奇怪的行为，有时它有效，但大多数时候我没有得到任何回应，或者得到与我点击的内容完全不同的东西。

为什么会这样？

You can see it functioning here (这是 PLAATS IN WINKELWAGEN 按钮上方的下拉菜单)

返回的 PHP 脚本具有完全相同的列表和值。

Answer 1

我认为您的发布完成后没有找到您的选项。您应该制作两个div，并且只更新需要更新的内容，因此您的选择不会通过重新添加而生效。

否则你可以尝试像这样发布:

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