如何清除表单中点击国家和州的旧值？答案

【问题标题】：How to clear old values on click of country and state in the form?如何清除表单中点击国家和州的旧值？
【发布时间】：2015-05-12 11:12:03
【问题描述】：

我的 html 表单有问题。现在我处于以下阶段：我需要选择一个国家，如果我选择印度，我将获得印度的州列表，或者如果将下拉列表更改为瑞士，我将获得用于键入状态的文本框。如下图。

在图片中，我选择了印度，并选择了古吉拉特邦。

这里我再次选择了瑞士并声明我输入为伯尔尼

我的问题是如果我将国家从瑞士更改为加拿大。我输入为“bern”的状态保持不变，如第三张图片所示。所以我需要将该字段设为空。当我选择不同的国家时，我需要将我的州字段设为空，所以请帮助我[我正在使用 html、js 和 php]。

脚本：

function ShowHideStateDetails()
    {
        if(document.getElementById("ai_country").value == 'India')
        {   
             document.getElementById("ai_other_state").style.display='none';    
             document.getElementById("ai_ind_state").style.display='';
        }
        else
        {  
             document.getElementById("ai_ind_state").style.display='none';
             document.getElementById("ai_other_state").style.display='';  
        }   
    }

HTML：

       <!-- country -->                       
        <label for="ai_country">Country</label>
        <input id='ai_country' onchange="ShowHideStateDetails()" >

       <!-- State -->    

       <label for="ai_state">State<</label>
       <input type="text" id="ai_other_state">
               <select  id="ai_ind_state" style="display: none;">
                    <option value="">Select</option>                                                    
                    <option value="Andhra Pradesh">Andhra Pradesh</option>                                                          
                    <option value="Arunachal Pradesh">Arunachal Pradesh</option>                                                            
                    <option value="Assam">Assam</option>
                    <option value="Bihar">Bihar</option>
                    <option value="Chandigarh">Chandigarh</option>
                    <option value="Chhattisgarh">Chhattisgarh</option>
                    <option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option>
                    <option value="Daman and Diu">Daman and Diu</option>
                    <option value="Delhi">Delhi</option>
                    <option value="Goa">Goa</option>
                    <option value="Gujarat">Gujarat</option>
                    <option value="Uttaranchal">Uttaranchal</option>
                    <option value="West Bengal">West Bengal</option>
               </select>

提前致谢

【问题讨论】：

标签： javascript php html

【解决方案1】：

下面的代码向您展示了如何清除“状态”下拉菜单并将先前选择的状态的值存储到隐藏变量中。

function onIndexChange()
{
	//Store the currently selected value from ai_ind_state to ai__state
	document.getElementById("ai__state").value = document.getElementById("ai_ind_state").value;
	
	//Now clear ai_ind_state dropdown
	document.getElementById("ai_ind_state").value = "";
	
	//Write as output for reference
	document.getElementById("tmp_output").innerHTML = "Last selected state: " + document.getElementById("ai__state").value;
	
}

<form>
<select name="country" onChange="onIndexChange()" id="country">
	<option value="">Select Country</option>
	<option value="1">C1</option>
	<option value="2">C2</option>
	<option value="3">C3</option>
</select>
<select name="ai_ind_state" id="ai_ind_state">
	<option value="">Select State</option>
	<option value="1">S1</option>
	<option value="2">S2</option>
	<option value="3">S3</option>
</select>
<input type="hidden" name="ai__state" id="ai__state">
</form>
<span id="tmp_output"></span>

【讨论】：

document.getElementById("ai_ind_state").value = "";所以我得到了解决方案，谢谢 kutekrish。
如何为隐藏字段提供该状态的值。我需要在隐藏属性中提供 [ai_other_state] 值我怎么能
当您处理 onChange 事件时，您可以跟踪隐藏输入字段中的值

【解决方案2】：

您可以在国家/地区更改时使用 jQuery 重置状态输入：

$( "#country-dropdown" ).change(function() {
  //fetch new data for dropdown (ie. by ajax)
});

【讨论】：

【解决方案3】：

上述问题的最终答案只是在脚本中添加几行，所以它的工作原理......！！！

<script>
    function ShowHideStateDetails()
    {
        if(document.getElementById("ai_country").value == 'India')
        {   
             document.getElementById("ai_ind_state").value = "";
             document.getElementById("ai_other_state").style.display='none';    
             document.getElementById("ai_ind_state").style.display='';
        }
        else
        {    
             document.getElementById("ai_other_state").value = ""; 
             document.getElementById("ai_ind_state").style.display='none';
             document.getElementById("ai_other_state").style.display=''; 
        }   
    }
 </script>

【讨论】：

【解决方案4】：

您可以使用选择框的onChange 事件来检测更改，并在需要时更新状态输入字段（清空字段和/或更改其类型）。

【讨论】：

【解决方案5】：

简单快速的解决方法是更改您的国家/地区下拉菜单刷新您的州下拉菜单。

【讨论】：