Нужно скрыть поле ввода при смене опции select

211

07 июля 2018, 02:00

$(document).ready(function() { 
  $('#shipping-method').change(function() { 
    $('.ss').slideDown(); 
    $('.ss').hide(); 
    $("." + $(this).val()).slideToggle(); 
    $("." + $(this).val()).show(); 
    $(this).next().show(); 
  }); 
});

.ss { 
  margin-top: 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="fields-group"> 
  <label for="delivery">  Метод доставки:</label><br> 
  <br> 
  <select name="shipping_method" id="shipping-method" class="form-control large-field"> 
    <option value="{&quot;title&quot;: &quot;До Двери&quot;, &quot;code&quot;: &quot;flat.flat&quot;, &quot;comment&quot;:&quot;&quot;, &quot;shipping_method&quot;:&quot;flat.flat&quot;, &quot;cost&quot;:&quot;5.00&quot;,&quot;tax_class_id&quot;:&quot;&quot;}" 
      class="form-control large-field flat">До Двери</option> 
    <option value="{&quot;title&quot;: &quot;До терминала&quot;, &quot;code&quot;: &quot;citylink.citylink&quot;, &quot;comment&quot;:&quot;&quot;, &quot;shipping_method&quot;:&quot;citylink.citylink&quot;, &quot;cost&quot;:&quot;0.1&quot;,&quot;tax_class_id&quot;:&quot;&quot;}" 
      class="form-control large-field citylink">До терминала</option> 
  </select> 
  <div class="ss"> 
    <input type="hidden" name="delivery-type" value="delivery"> 
    <label for="address_1"> По адресу:</label><br> 
    <input type="text" name="address_1" id="address_1" value="post hame" class="form-control large-field" placeholder="  № отделения / адрес"> 
    <span class="error"></span> 
  </div> 
</div>

Это кусок из OpenCart 2. Checkout переделанный. Подскажите, что не так и как сделать чтобы скрывало/показывало?

Answer 1

var sel = document.querySelector('select'); 
 
sel.addEventListener('change', function () {  
  var inpt = document.querySelector('#address_1'); 
   inpt.style.display = inpt.style.display == 'none'? 'block' : 'none'; 
});

.ss { 
  margin-top: 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="fields-group"> 
  <label for="delivery">  Метод доставки:</label><br> 
  <br> 
  <select name="shipping_method" id="shipping-method" class="form-control large-field"> 
    <option value="{&quot;title&quot;: &quot;До Двери&quot;, &quot;code&quot;: &quot;flat.flat&quot;, &quot;comment&quot;:&quot;&quot;, &quot;shipping_method&quot;:&quot;flat.flat&quot;, &quot;cost&quot;:&quot;5.00&quot;,&quot;tax_class_id&quot;:&quot;&quot;}" 
      class="form-control large-field flat">До Двери</option> 
    <option value="{&quot;title&quot;: &quot;До терминала&quot;, &quot;code&quot;: &quot;citylink.citylink&quot;, &quot;comment&quot;:&quot;&quot;, &quot;shipping_method&quot;:&quot;citylink.citylink&quot;, &quot;cost&quot;:&quot;0.1&quot;,&quot;tax_class_id&quot;:&quot;&quot;}" 
      class="form-control large-field citylink">До терминала</option> 
  </select> 
  <div class="ss"> 
    <input type="hidden" name="delivery-type" value="delivery"> 
    <label for="address_1"> По адресу:</label><br> 
    <input type="text" name="address_1" id="address_1" value="post hame" class="form-control large-field" placeholder="  № отделения / адрес"> 
    <span class="error"></span> 
  </div> 
</div>

Answer 2

Заменил на такой код и всё заработало:

$(document).ready(function() { 
  $('#shipping-method').on('change', f_acc); 
}); 
 
function f_acc() { 
  $('.ss').not($(this).next()).slideToggle(); 
  $(this).next().slideUp(); 
  $('.ss').show(); 
}

.ss { 
  margin-top: 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="fields-group"> 
  <label for="delivery">  Метод доставки:</label><br> 
  <br> 
  <select name="shipping_method" id="shipping-method" class="form-control large-field"> 
    <option value="{&quot;title&quot;: &quot;До Двери&quot;, &quot;code&quot;: &quot;flat.flat&quot;, &quot;comment&quot;:&quot;&quot;, &quot;shipping_method&quot;:&quot;flat.flat&quot;, &quot;cost&quot;:&quot;5.00&quot;,&quot;tax_class_id&quot;:&quot;&quot;}" 
      class="form-control large-field flat">До Двери</option> 
    <option value="{&quot;title&quot;: &quot;До терминала&quot;, &quot;code&quot;: &quot;citylink.citylink&quot;, &quot;comment&quot;:&quot;&quot;, &quot;shipping_method&quot;:&quot;citylink.citylink&quot;, &quot;cost&quot;:&quot;0.1&quot;,&quot;tax_class_id&quot;:&quot;&quot;}" 
      class="form-control large-field citylink">До терминала</option> 
  </select> 
  <div class="ss"> 
    <input type="hidden" name="delivery-type" value="delivery"> 
    <label for="address_1"> По адресу:</label><br> 
    <input type="text" name="address_1" id="address_1" value="post hame" class="form-control large-field" placeholder="  № отделения / адрес"> 
    <span class="error"></span> 
  </div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Mysql возвращает значения по разному

День добрый уважаемые форумчанеСтолкнулся с такой проблемой

163

Java

Реализация методов в LinkedList

Всем добрый вечерПрошу помощи в таком вопросе: у меня есть LinkedList с реализованными в нем методами, не получается реализовать 3 метода: public boolean...

225

Java