如果選擇了第一個選項，請在文本前加

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上的選擇顯示和隱藏股利...

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(); 
 
    }); 
 
    });

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

您可以將量程。

jQuery(function() { 
 
    // 
 
    // add span and hide 
 
    // 
 
    jQuery('<span class="preis_ab">ab </span>').insertBefore('.WA_price2').hide(); 
 
    jQuery('#attribute149').on('change', function(e) { 
 
     // 
 
     // toggle visibility if the index of selected option is 1 
 
     // 
 
     jQuery('#WA_price .preis_ab').toggle(this.selectedIndex == 1); 
 
     
 
     // 
 
     // a different approach is: check if option with 
 
     // value 28 is selected 
 
     // 
 
     //jQuery('#WA_price .preis_ab').toggle(
 
     // jQuery('#attribute149 option[value=28]').is(':selected')); 
 
    }); 
 
});

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

：在 dom ready和 hide當 change事件發生，你可以根據所選擇的 index跨度 toggle the visibility元