Show/hide 基于表单值的可见性

Question

我想hide/show根据我所做的选择创建一个表格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>
   
   <div class="form-row">
                <label>
                    <span>Country<em>*</em></span>
     <select name="country_list" id="countries">
          <option value="">Please select</option>
                         <option value="1" selected="">USA</option>
                         <option value="2">Russia</option>
                         <option value="3">Canada</option>
       <option value="4">Brazil</option>
       <option value="4">UK</option>
                    </select>
    </label>
   
   <div class="form-row">
                <label>
                    <span>State</span>
                    <select name="state_field" value="" id="state">   
                         <option value="1" selected="">Alabama</option>
                         <option value="2">Alaska</option>
                         <option value="3">Arizona</option>
       <option value="4">Arkansas</option>
       <option value="5">California</option>
        </select>
                </label>
            </div>

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

Answer 1

首先，您不应该在两种形式的元素（div、表单和选择器）上使用相同的 id 名称。

相反，您可以使用 class 属性来定制您的需求。始终通过父表单引用 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>

Show/hide 基于表单值的可见性

Show/hide visibility based on form values

javascript

forms

jquery

show

hide