Question

我有各种各样的选项供您选择。选择第一个选项时，文本应该添加另一个div。如果未选择第一个选项，则文本将消失。

我在考虑使用toggleClass或者addClass或者removeClass应该可以解决这个问题但是无法解决我的问题。

我的代码如下所示：

<div id="WA_price">
    <p class="WA_price2">200&nbsp;€</p>
</div>

 <div class="input-box">
        <select name="super_attribute[149]" id="attribute149" class="required-entry super-attribute-select">
            <option value="0">Choose option…</option>
            <option value="28" price="139" data-label="1000 mm">1000 mm</option>
            <option value="30" price="169" data-label="1200 mm" class="selected">1200 mm</option>
            <option value="32" price="199" data-label="1400 mm">1400 mm</option>
        </select>
    </div>

我尝试了类似的东西，但它不起作用：

jQuery('<span class="preis_ab">ab </span>').insertBefore('.WA_price2');
jQuery( "option" ).each(function() {
      if ('jQuery("option:first-child").hasClass("selected")') {
        jQuery('.preis_ab').addClass('show');
        } else if ('jQuery("option:not(:first-child)").hasClass("selected")') {
            jQuery('.preis_ab').removeClass('show').addClass('hide');
        }
    });

Answer 1

您需要将事件处理程序绑定到select元素。使用.on()，您可以在select元素中检测change（在这种情况下使用其ID）。从那里，您可以隐藏并显示基于当前所选值的div（在每个选项的html value属性中检索此值。

$('<span class="preis_ab">ab </span>').insertBefore('.WA_price2').hide();

$("#attribute149").on('change', function(){
  if ($(this).val() === "28") $('.preis_ab').show();
  else $('.preis_ab').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="WA_price">
    <p class="WA_price2">200&nbsp;€</p>
</div>

 <div class="input-box">
        <select name="super_attribute[149]" id="attribute149" class="required-entry super-attribute-select">
            <option value="0">Choose option…</option>
            <option value="28" price="139" data-label="1000 mm">1000 mm</option>
            <option value="30" price="169" data-label="1200 mm" class="selected">1200 mm</option>
            <option value="32" price="199" data-label="1400 mm">1400 mm</option>
        </select>
    </div>

Answer 2

在选择中使用.change来显示和隐藏div ...

＆＃13;

jQuery('<span class="preis_ab">ab </span>').insertBefore('.WA_price2');

  $( ".super-attribute-select" ).change(function () {
   
    $( ".super-attribute-select option:selected" ).each(function() {
      if($( this ).val()=='28') $('.preis_ab').show();
      else $('.preis_ab').hide();
    });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="WA_price">
    <p class="WA_price2">200&nbsp;€</p>
</div>

 <div class="input-box">
        <select name="super_attribute[149]" id="attribute149" class="required-entry super-attribute-select">
            <option value="0">Choose option…</option>
            <option value="28" price="139" data-label="1000 mm">1000 mm</option>
            <option value="30" price="169" data-label="1200 mm" class="selected">1200 mm</option>
            <option value="32" price="199" data-label="1400 mm">1400 mm</option>
        </select>
    </div>

＆＃13;

Answer 3

您可以在dom ready和hide处插入span元素。发生change事件时，您可以根据所选的toggle the visibility index来{{3}}范围：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="WA_price">
    <p class="WA_price2">200&nbsp;€</p>
</div>

<div class="input-box">
    <select name="super_attribute[149]" id="attribute149" class="required-entry super-attribute-select">
        <option value="0">Choose option…</option>
        <option value="28" price="139" data-label="1000 mm">1000 mm</option>
        <option value="30" price="169" data-label="1200 mm" class="selected">1200 mm</option>
        <option value="32" price="199" data-label="1400 mm">1400 mm</option>
    </select>
</div>

＆＃13;

{{1}}

＆＃13;

如果选择第一个选项前置文本

3 个答案: