选择一个选项并在结果中发布其值会自动选择该选项

时间:2018-04-12 13:19:55

标签: javascript jquery

我有一个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在WINKELWAGEN按钮上方的下拉菜单)

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

1 个答案:

答案 0 :(得分:1)

我认为你完成的帖子找不到你的选择。您应该制作两个div并且仅更新更新所需的内容,因此重新添加它时,您的选择无效。

否则你可以尝试yor post.done,如下所示:

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