Question

我想隐藏/显示基于我所做选择的表格div。我已经完成了这个，但是我需要一个不同的代码，因为我在同一个代码中有两个表单并且脚本存在冲突。

请参阅下面已经有效的代码，但我需要第二个脚本，它不会与我已有的脚本冲突。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

根据表单值显示/隐藏可见性

1 个答案: