如何将下拉列表更改为文本框，反之亦然基于另一个下拉列表

Question

我正在开发一个应用程序，其中使用country（下拉列表）和state（下拉列表）。

问题是，当1选择country，它的状态将在state下拉列表填充，但仅供美国国家列表中但不提供其他国家，使他们必须键入英寸

那么如何改变state基于美国的输入类型（TEXTBOX或DROPDOWNLIST）（country）。 也就是说

If USA -DROPDOWNLIST Else Other Countries -TEXTBOX 

Answer 1

我会做一个选择框默认，然后用这个jQuery来改变它。

if($(#country_select).val() != 'USA'){ 
    $('#selectbox').attr('type', 'textbox'); 
    $('#selectbox option').remove(); 
} 

注意

这是一个非常简单的解决方案，并要求默认值是美国。我认为有足够的信息来构建更强大的解决方案。

Answer 2

嗨在国家下拉列表中添加事件onchange并切换selectedValue，如果它是其中一个国家没有城市隐藏下拉列表并显示文本框，反之亦然。

<select id="country" onchange="check(this)"> 
    <option value="Select">Select</option> 
    <option value="USA">USA</option> 
    <option value="EG">EG</option>  
</select> 

<select id="s_city"> 
</select> 

<input type="text" id="t_city" style="display:none;"> 

脚本

function check(s) 
{ 
    document.getElementById('t_city').value =''; 
    document.getElementById('s_city').innerHTML=''; 


    var c= s.options[s.selectedIndex].value; 
    //Here You Can Start Loading your states with each country 
    if(c !="USA") 
    { 
    document.getElementById('t_city').style.display='block'; 
    document.getElementById('s_city').style.display='none'; 
    } 
    else 
    { 
    document.getElementById('t_city').style.display='none'; 
    document.getElementById('s_city').style.display='block'; 
    } 
} 

我希望这个例子帮助了

Answer 3

使用DOM /内部HTML方法，你可以做到这一点。不JQuery的

<select id='country_select'> 
<div id='container'> 
<input ...> 
</div> 

if (document.getElementById ("country_select").value != "USA") 
{ 
document.getElementById("container").innerHTML = "<input ...>"; 
} 
else 
document.getElementById("container").innerHTML = "<select ...>"; 

Answer 4

这里的想法

innerHTML的方法是，你需要的状态下拉，也是一个文本框。如果您希望首先显示下拉列表，则不要显示文本框或相互更改。

虽然我的解决方案是非常相似Marvan，只是看看这里

• http://jsfiddle

一个活生生的例子为其他参考。如果你打算把这个发送给你，我想这个名字必须是相同的。

Answer 5

我将有一个国家的下拉列表和其他国家的文本框。

HTML

<select id="cboCountry"> 
    <!-- <option value="USA">USA</option> --> 
    <!-- etc --> 
</select> 
<select id="cboState"> 
    <!-- <option value="Alabama">Alabama</option> --> 
    <!-- etc --> 
</select> 
<input type="text" id="txtState" style="display:none;" /> 

的Javascript

$('#cboCountry').change(
    if($('#cboCountry').value() != 'USA'){ 
     $('#txtState').show(); 
     $('#cboState').hide(); 
    } 
    else 
    { 
     $('#txtState').hide(); 
     $('#cboState').show(); 
    } 
);