前端之家

  1. 首页
  2. 问答

如何根据下拉菜单中选择的选项显示DIV（或其他）

• 问答

我有一个下拉菜单，其中包含世界上所有州的列表。

对于欧盟以外的国家，我想在div中显示此消息“不包括额外的欧盟税和关税。您必须在交货时付款”。

另一方面，对于欧盟成员国，我想表明“无需支付进口关税”。

我创建了一个数组，该数组包含属于欧盟成员国的所有值。但是我不知道如何设置它以使我的想法生效。

var european = ["Austria","Belgium","Bulgaria","Croatia","Cyprus","Czechia","Denmark","Estonia","Finland","France","Germany","Greece","Hungary","Ireland","Italy","Latvia","Lithuania","Luxembourg","Malta","Netherlands","Poland","Portugal","Romania","Slovakia","Slovenia","Spain","Sweden","United Kingdom"]
<select size="1" autocomplete="shipping country" data-trekkie-id="shipping_country_field" data-backup="country" class="field__input field__input--select" aria-required="true" name="checkout[shipping_address][country]" id="checkout_shipping_address_country">
  <option data-code="DE" value="Germany">Deutschland</option>
  <option data-code="GB" value="United Kingdom">Vereinigtes Königreich</option>
  <option data-code="US" value="United States">Vereinigte Staaten</option>
  <option data-code="IT" selected="selected" value="Italy">Italien</option>
  <option data-code="EG" value="Egypt">Ägypten</option>
  <option data-code="GQ" value="Equatorial Guinea">Äquatorialguinea</option>
  <option data-code="ET" value="Ethiopia">Äthiopien</option>
  <option data-code="AF" value="Afghanistan">Afghanistan</option>
  <option data-code="AX" value="Aland Islands">Ålandinseln</option>
  <option data-code="AL" value="Albania">Albanien</option>
  <option data-code="DZ" value="Algeria">Algerien</option>
  <option data-code="UM" value="United States Minor Outlying Islands">Amerikanische Überseeinseln</option>
</select>

huihuiitsme 回答：如何根据下拉菜单中选择的选项显示DIV（或其他）

var european = ["Austria","Belgium","Bulgaria","Croatia","Cyprus","Czechia","Denmark","Estonia","Finland","France","Germany","Greece","Hungary","Ireland","Italy","Latvia","Lithuania","Luxembourg","Malta","Netherlands","Poland","Portugal","Romania","Slovakia","Slovenia","Spain","Sweden","United Kingdom"]


function isEuropean(country){
  return european.indexOf(country)>=0;
}

//BIND SELECT Change
$(function(){
  $("#checkout_shipping_address_country").change(function() {
    onselection(this);
  });
})

function onselection(sel){
  console.log(sel.value);
  let country = sel.value;
  
  if(isEuropean(country)){
    $('#msg').text("EXTRA EU Tax and duties NOT included. You will have to pay them upon delivery");
  }else{
    $('#msg').text("There are no import duties to pay");
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select  size="1" autocomplete="shipping country" data-trekkie- data-backup="country" class="field__input field__input--select" aria-required="true" name="checkout[shipping_address][country]" id="checkout_shipping_address_country">
        <option data-code="DE" value="Germany">Deutschland</option>
        <option data-code="GB" value="United Kingdom">Vereinigtes Königreich</option>
        <option data-code="US" value="United States">Vereinigte Staaten</option>
        <option data-code="IT" selected="selected" value="Italy">Italien</option>
        <option data-code="EG" value="Egypt">Ägypten</option>
        <option data-code="GQ" value="Equatorial Guinea">Äquatorialguinea</option>
        <option data-code="ET" value="Ethiopia">Äthiopien</option>
        <option data-code="AF" value="Afghanistan">Afghanistan</option>
        <option data-code="AX" value="Aland Islands">Ålandinseln</option>
        <option data-code="AL" value="Albania">Albanien</option>
        <option data-code="DZ" value="Algeria">Algerien</option>
        <option data-code="UM" value="United States Minor Outlying Islands">Amerikanische Überseeinseln</option>
        </select>
        
       <div id="msg"> </div>

drop-down-menuhtmljavascriptshow-hide
本文链接：https://www.f2er.com/2733369.html

大家都在问