Показать/скрыть видимость на основе значений формы

Я хочу скрыть/показать форму div на основе выбора, который я делаю. Я уже сделал это, но мне нужен другой код, потому что у меня две формы в одном коде, и скрипты находятся в конфликте.Показать/скрыть видимость на основе значений формы

См. Ниже код, который уже работает, но мне нужен второй скрипт, который не будет противоречить тому, который у меня уже есть.

<script type="text/javascript"> 
 
    $('#countries').on('change', function() { 
 
     if(['1'].indexOf(this.value) > -1) { 
 
      $('#state').prop('disabled', false).closest('div').show(); 
 
     } else { 
 
      $('#state').val('').prop('disabled', true).closest('div').hide(); 
 
     } 
 
    }) 
 
    .change(); 
 
</script>

<div> 
 
    <form> 
 
    <div class="form-row"> 
 
       <label> 
 
        <span>Job title<em>*</em></span> 
 
        <select name="dropdown"> 
 
         <option>Select job description</option> 
 
         <option>Select job description</option> 
 
         <option>Select job description</option> 
 
        </select> 
 
       </label> 
 
      </div> 
 
\t \t \t 
 
\t \t \t <div class="form-row"> 
 
       <label> 
 
        <span>Country<em>*</em></span> 
 
\t \t \t \t \t <select name="country_list" id="countries"> 
 
\t \t \t \t \t  <option value="">Please select</option> 
 
         <option value="1" selected="">USA</option> 
 
         <option value="2">Russia</option> 
 
         <option value="3">Canada</option> 
 
\t \t \t \t \t \t <option value="4">Brazil</option> 
 
\t \t \t \t \t \t <option value="4">UK</option> 
 
        </select> 
 
\t \t \t \t </label> 
 
\t \t \t 
 
\t \t \t <div class="form-row"> 
 
       <label> 
 
        <span>State</span> 
 
        <select name="state_field" value="" id="state"> \t \t \t 
 
         <option value="1" selected="">Alabama</option> 
 
         <option value="2">Alaska</option> 
 
         <option value="3">Arizona</option> 
 
\t \t \t \t \t \t <option value="4">Arkansas</option> 
 
\t \t \t \t \t \t <option value="5">California</option> 
 
\t \t \t \t  </select> 
 
       </label> 
 
      </div> 
 

 
      <div class="form-row"> 
 
       <button type="submit">Register</button> 
 
      </div> 
 
    </form> 
 
    </div>

источник

2016-10-14 Alina

Я вижу только одну форму в вас код. Вы можете обернуть оператор if внутри '$ ('# countries'). On ('change', function() {...});' и поместить его в функцию, в которой вы передаете идентификатор формы в качестве параметра , Используйте классы вместо ids для вашего выбора и присвойте параметру prop() что-то вроде этого '$ ('#' + formId + '.state'). Prop ('disabled', false) .closest ('div'). .show(); ' –

Прежде всего, вы не должны использовать то же имя, идентификатор на элементах (дивы, формы и селекторы) для обеих форм.

Вместо этого вы можете использовать атрибут класса для адаптации ваших потребностей. Всегда ссылаться на селектор jquery по родительской форме.


 
     $(function() { 
 
      $('.countries').on('change', function() { 
 
       if($(this).val() == '1') { 
 
        $(this).parent().find('.states').prop('disabled', false).show(); 
 
       } else { 
 
        $(this).parent().find('.states').val('').prop('disabled', true).hide(); 
 
       } 
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<form id="form-1"> 
 
    <h3>Form 1</h3> 
 
    <select name="country_list" id="countries-1" class="countries"> 
 
     <span>Country</span> 
 
     <option value="">Please select</option> 
 
     <option value="1" selected="">USA</option> 
 
     <option value="2">Russia</option> 
 
     <option value="3">Canada</option> 
 
    </select> 
 

 
    <select name="state_field" value="" id="state-1" class="states"> 
 
     <span>State</span> 
 
     <option value="1" selected="">Alabama</option> 
 
     <option value="2">Alaska</option> 
 
     <option value="3">Arizona</option> 
 
    </select> 
 
</form> 
 

 

 
<form id="form-2"> 
 
    <h3>Form 2</h3> 
 

 
    <select name="country_list" id="countries-2" class="countries"> 
 
     <span>Country</span> 
 
     <option value="">Please select</option> 
 
     <option value="1" selected="">USA</option> 
 
     <option value="2">Russia</option> 
 
     <option value="3">Canada</option> 
 
    </select> 
 

 

 
    <select name="state_field" value="" id="state-2" class="states"> 
 
     <span>State</span> 
 
     <option value="1" selected="">Alabama</option> 
 
     <option value="2">Alaska</option> 
 
     <option value="3">Arizona</option> 
 
    </select> 
 
    
 
    
 
    
 
</form> 
 
    
 
    
 
    
 
    
 
    
 
</body>

источник

2016-10-14 00:51:34

Показать/скрыть видимость на основе значений формы

ответ

Смежные вопросы