2016-12-27 10 views
-1

を使用して、米国を選択した場合、誰かがjqueryのを使用して、米国を選択した場合、私は1つの以上の入力が必要な1つの以上の入力をしたい、私はjqueryのについて十分な知識誰かがjqueryの

私のhtml

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQuery Select Change Event For Dependent Select Option Field - Demo Preview</title> 
    <meta name="robots" content="noindex, nofollow"> 

<!-- include css file here--> 
    <link rel="stylesheet" href="select_jquery.css"/> 

<!-- include JavaScript file here--> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript" src="select_jquery.js"></script> 

</head> 
<body> 
    <div class="container"> 

<div class="main"> 
    <h2>Dependent Select Option Field Example</h2><hr/></br> 

<label>Select Country:</label><br/><br/> 

<div id="prm"> 

<select id="country"> 
    <option>--Select--</option> 
    <option>USA</option> 
    <option>AUSTRALIA</option> 
    <option>FRANCE</option> 
</select><br/><br/> 

<label>Select City:</label><br/><br/> 

<select id="city"> 
<!--Dependent Select option field--> 
</select> 

</div> 
</div> 

<!-- Div Fugo is advertisement div--> 
<div class="fugo"> 
<a href="http://www.formget.com/app/"><img src="images/formget.jpg" /></a> 
</div> 
    </div> 
</body> 
</html> 

jqueryのを持っていない助けてください。 JS

$(document).ready(function(){ 

//Initializing arrays with city names 
var USA = [ 
    {display: "Washington, D.C.", value: "WashingtonDC" }, 
    {display: "Alaska", value: "Alaska" }, 
    {display: "New York", value: "New-York" }, 
    {display: "Florida", value: "Florida" }, 
    {display: "Hawaii", value: "Hawaii" }, 
    {display: "California", value: "California" }]; 

var AUSTRALIA = [ 
    {display: "Canberra", value: "Canberra" }, 
    {display: "Sydney", value: "Sydney" }, 
    {display: "Melbourne", value: "Melbourne" }, 
    {display: "Perth", value: "Perth" }, 
    {display: "Gold Coast ", value: "Gold-Coast" }]; 

var FRANCE = [ 
    {display: "Paris", value: "Paris" }, 
    {display: "Avignon", value: "Avignon" }, 
    {display: "Strasbourg", value: "Strasbourg" }, 
    {display: "Nice", value: "Nice" }]; 

//Function executes on change of first select option field 
$("#country").change(function(){ 

var select = $("#country option:selected").val(); 

switch(select){ 
case "USA": 
    city(USA); 
break; 

case "AUSTRALIA": 
    city(AUSTRALIA); 
break; 

case "FRANCE": 
    city(FRANCE); 
break; 

default: 
    $("#city").empty(); 
    $("#city").append("<option>--Select--</option>"); 
break; 
} 
}); 

//Function To List out Cities in Second Select tags 
function city(arr){ 
    $("#city").empty();//To reset cities 
    $("#city").append("<option>--Select--</option>"); 
    $(arr).each(function(i){//to list cities 
     $("#city").append("<option value=\""+arr[i].value+"\">"+arr[i].display+"</option>") 
    }); 
} 

}); 

誰かがjqueryのを使用して、米国を選択した場合、私は1つの以上の入力をしたいが、私はjqueryの

についての十分な知識を持っていない助けてください

答えて

1

シンプルapprochがあるが、米国のオプションをチェックし、あなたのhtmlコードで入力を書き、それがdisplay:noneに隠され、ユーザをOCEせることで、あなたはここでそれを示してあなたが

<select id="country"> 
    <option>--Select--</option> 
    <option>USA</option> 
    <option>AUSTRALIA</option> 
    <option>FRANCE</option> 
</select><br/><br/> 
<input type="text" name="test" class="added" required style="display:none"> 

とあなたにを処理する方法ですJSファイルを追加するだけで、コードにこの行を追加できます。

switch(select){ 
case "USA": 
    city(USA); 
    $(".added").show(); 

break; 
関連する問題